97:I[903690,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3lly9te_pqku4.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/chunks/1hm3q0j7vx_jl.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/30cg74pivru03.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ir1-mfl-mxun.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3139m71i45f_m.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1d27q4_h4it5w.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/10df6ghephwfh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3g-fs4xgai-g5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/45cgj0o2dd5ka.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1vo2s82fx-91j.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2b7mx-6g-n-p-.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0n2vqkuu3m7mv.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/151itv_w2dl-d.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1pzl0qjyusfha.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1ilnu97ogkb5i.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0wkini5l9f_9s.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1zvm-f33paz4c.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/43emq6v2fv13u.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/02rh369i5mh-5.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1e1jj32nu3059.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/054nyoml5t8yc.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0tmnhs5rj_pj7.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/130lebo2db7jj.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/311y33ni2zbzy.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0b2jr5pl--hcz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3h4dxz6j9vrb9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2ak79vkcuz1ia.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1qvyjk5p58sle.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/296n5x9xr-_1t.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0xushjtk7v84v.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2gyta6jpl0xuw.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/3lly9te_pqku4.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/2x0r6v1gm-sbg.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/1nep_-vv8ldmi.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q","/chat-static/_next/static/chunks/0ws07icczx8x9.js?dpl=dpl_F1THBpm5YqPyme2iKBhdMD2ZZZ8q"],"SWRDataProvider"] 9b:[] 9c:[["hm1anqavZAg","OYIHHKnYsA7"]] 9d:[["hm1anqavZAg",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["hm1anqavZAg","$D2026-03-28T22:59:32.796Z"]] 9f:[["hm1anqavZAg",false]] a0:[["hm1anqavZAg",{"git":{"ref":"v0/yellosolarhub-5f647d7c","sha":"45586ca5588496c1a269c3d972b30c19db0febac","type":"github","repoId":0,"repoName":"v0-yello-solarinventory_v1","ownerName":"Yello-Solar-Hub","commitMessage":"Connected via create branch"}}]] a1:[["hm1anqavZAg",null]] a2:[["hm1anqavZAg",true]] a3:[["hm1anqavZAg",true]] a4:[] a5:T13c16c,[V0_FILE]typescriptreact:file="modules/sales/index.ts" export * from "./components" export * from "./services" export * from "./hooks" export * from "./types" export * from "./utils" export * from "./constants" export * from "./contexts" export * from "./providers" [V0_FILE]typescriptreact:file="modules/sales/types/index.ts" export * from "./lead" export * from "./opportunity" export * from "./proposal" export * from "./contract" export * from "./customer" export * from "./sales-rep" export * from "./commission" export * from "./pipeline" [V0_FILE]typescriptreact:file="modules/sales/types/opportunity.ts" export interface Opportunity { id: string leadId: string title: string value: number stage: OpportunityStage probability: number expectedCloseDate: Date actualCloseDate?: Date assignedTo: string notes: string createdAt: Date updatedAt: Date products?: string[] competitors?: string[] decisionMakers?: string[] activities?: ActivityReference[] customFields?: Record } export enum OpportunityStage { QUALIFICATION = "qualification", NEEDS_ANALYSIS = "needs_analysis", PROPOSAL = "proposal", NEGOTIATION = "negotiation", CLOSED_WON = "closed_won", CLOSED_LOST = "closed_lost", } export interface ActivityReference { id: string type: "call" | "email" | "meeting" | "task" date: Date summary: string } export interface OpportunityFilter { stage?: OpportunityStage[] assignedTo?: string[] dateRange?: { start: Date end: Date } valueRange?: { min: number max: number } search?: string products?: string[] } [V0_FILE]typescriptreact:file="modules/sales/types/proposal.ts" export interface Proposal { id: string opportunityId: string customerId: string title: string description: string value: number discountAmount?: number discountPercentage?: number finalValue: number status: ProposalStatus validUntil: Date createdAt: Date updatedAt: Date createdBy: string approvedBy?: string approvedAt?: Date rejectedReason?: string terms?: string notes?: string items: ProposalItem[] attachments?: Attachment[] customFields?: Record version: number previousVersionId?: string } export enum ProposalStatus { DRAFT = "draft", SENT = "sent", VIEWED = "viewed", ACCEPTED = "accepted", REJECTED = "rejected", EXPIRED = "expired", REVISED = "revised", } export interface ProposalItem { id: string name: string description?: string quantity: number unitPrice: number discount?: number tax?: number totalPrice: number type: "product" | "service" | "subscription" productId?: string } export interface Attachment { id: string name: string url: string type: string size: number uploadedAt: Date uploadedBy: string } export interface ProposalFilter { status?: ProposalStatus[] dateRange?: { start: Date end: Date } valueRange?: { min: number max: number } search?: string createdBy?: string[] } [V0_FILE]typescriptreact:file="modules/sales/types/customer.ts" export interface Customer { id: string name: string email: string phone: string address: string city: string state: string zipCode: string type: CustomerType segment: CustomerSegment status: CustomerStatus createdAt: Date updatedAt: Date assignedTo?: string website?: string industry?: string size?: string annualRevenue?: number taxId?: string contacts?: Contact[] notes?: string tags?: string[] customFields?: Record } export enum CustomerType { INDIVIDUAL = "individual", BUSINESS = "business", GOVERNMENT = "government", NON_PROFIT = "non_profit", } export enum CustomerSegment { RESIDENTIAL = "residential", COMMERCIAL = "commercial", INDUSTRIAL = "industrial", AGRICULTURAL = "agricultural", PUBLIC_SECTOR = "public_sector", } export enum CustomerStatus { LEAD = "lead", PROSPECT = "prospect", CUSTOMER = "customer", CHURNED = "churned", INACTIVE = "inactive", } export interface Contact { id: string name: string email: string phone: string position: string isPrimary: boolean notes?: string } export interface CustomerFilter { type?: CustomerType[] segment?: CustomerSegment[] status?: CustomerStatus[] assignedTo?: string[] dateRange?: { start: Date end: Date } search?: string tags?: string[] } [V0_FILE]typescriptreact:file="modules/sales/types/sales-rep.ts" export interface SalesRep { id: string userId: string name: string email: string phone: string position: string department: string manager?: string territory?: string[] specialties?: string[] status: "active" | "inactive" | "on_leave" hireDate: Date targets?: SalesTarget[] performanceMetrics?: PerformanceMetrics } export interface SalesTarget { id: string period: string startDate: Date endDate: Date targetType: "revenue" | "units" | "new_customers" | "conversion_rate" targetValue: number currentValue: number status: "pending" | "in_progress" | "achieved" | "missed" } export interface PerformanceMetrics { averageDealSize: number conversionRate: number salesCycle: number winRate: number revenueGenerated: number leadsGenerated: number meetingsScheduled: number proposalsSent: number } [V0_FILE]typescriptreact:file="modules/sales/types/commission.ts" export interface Commission { id: string salesRepId: string contractId: string amount: number percentage: number baseAmount: number status: CommissionStatus calculatedAt: Date paidAt?: Date notes?: string adjustments?: CommissionAdjustment[] } export enum CommissionStatus { PENDING = "pending", APPROVED = "approved", PAID = "paid", DISPUTED = "disputed", CANCELED = "canceled", } export interface CommissionAdjustment { id: string amount: number reason: string appliedAt: Date appliedBy: string } export interface CommissionPlan { id: string name: string description?: string baseRate: number tiers?: CommissionTier[] bonuses?: CommissionBonus[] effectiveDate: Date expirationDate?: Date status: "active" | "inactive" | "draft" } export interface CommissionTier { id: string minValue: number maxValue?: number rate: number } export interface CommissionBonus { id: string name: string description?: string type: "fixed" | "percentage" value: number conditions: string } [V0_FILE]typescriptreact:file="modules/sales/types/pipeline.ts" export interface Pipeline { id: string name: string description?: string stages: PipelineStage[] isDefault: boolean createdAt: Date updatedAt: Date } export interface PipelineStage { id: string name: string description?: string order: number probability: number color?: string isWon?: boolean isLost?: boolean } export interface PipelineStats { totalValue: number totalCount: number stageBreakdown: { stageId: string stageName: string count: number value: number percentage: number }[] conversionRates: { fromStage: string toStage: string rate: number }[] averageCycleTime: number winRate: number } [V0_FILE]typescriptreact:file="modules/sales/services/index.ts" export * from "./lead-service" export * from "./opportunity-service" export * from "./proposal-service" export * from "./contract-service" export * from "./customer-service" export * from "./sales-rep-service" export * from "./commission-service" export * from "./pipeline-service" export * from "./analytics-service" export * from "./integration-service" [V0_FILE]typescriptreact:file="modules/sales/services/opportunity-service.ts" import type { Opportunity, OpportunityFilter, OpportunityStage } from "../types/opportunity" export class OpportunityService { async getOpportunities(filter?: OpportunityFilter): Promise { // Implementation would fetch opportunities from API with optional filtering return [] } async getOpportunityById(id: string): Promise { // Implementation would fetch a specific opportunity by ID return null } async createOpportunity(opportunity: Omit): Promise { // Implementation would create a new opportunity return {} as Opportunity } async updateOpportunity(id: string, opportunity: Partial): Promise { // Implementation would update an existing opportunity return {} as Opportunity } async deleteOpportunity(id: string): Promise { // Implementation would delete an opportunity return true } async changeOpportunityStage(id: string, stage: OpportunityStage): Promise { // Implementation would update just the stage of an opportunity return {} as Opportunity } async assignOpportunity(id: string, salesRepId: string): Promise { // Implementation would assign an opportunity to a sales rep return {} as Opportunity } async calculateProbability(id: string): Promise { // Implementation would calculate the probability of winning based on various factors return 0 } async getForecast(period: { start: Date; end: Date }): Promise<{ totalValue: number weightedValue: number byStage: Record byMonth: Record }> { // Implementation would calculate sales forecast return { totalValue: 0, weightedValue: 0, byStage: {} as Record, byMonth: {}, } } } [V0_FILE]typescriptreact:file="modules/sales/services/proposal-service.ts" import type { Proposal, ProposalFilter, ProposalStatus } from "../types/proposal" export class ProposalService { async getProposals(filter?: ProposalFilter): Promise { // Implementation would fetch proposals from API with optional filtering return [] } async getProposalById(id: string): Promise { // Implementation would fetch a specific proposal by ID return null } async createProposal(proposal: Omit): Promise { // Implementation would create a new proposal return {} as Proposal } async updateProposal(id: string, proposal: Partial): Promise { // Implementation would update an existing proposal return {} as Proposal } async deleteProposal(id: string): Promise { // Implementation would delete a proposal return true } async changeProposalStatus(id: string, status: ProposalStatus, reason?: string): Promise { // Implementation would update just the status of a proposal return {} as Proposal } async generatePdf(id: string): Promise { // Implementation would generate a PDF version of the proposal return "" } async sendProposal(id: string, recipients: string[]): Promise { // Implementation would send the proposal to recipients return true } async trackViews(id: string): Promise<{ viewCount: number; lastViewed?: Date }> { // Implementation would track when a proposal was viewed return { viewCount: 0 } } async createRevision(id: string, changes: Partial): Promise { // Implementation would create a new version of the proposal return {} as Proposal } async compareVersions(id1: string, id2: string): Promise> { // Implementation would compare two versions of a proposal return {} } } [V0_FILE]typescriptreact:file="modules/sales/services/contract-service.ts" import type { Contract, ContractFilter, ContractStatus } from "../types/contract" export class ContractService { async getContracts(filter?: ContractFilter): Promise { // Implementation would fetch contracts from API with optional filtering return [] } async getContractById(id: string): Promise { // Implementation would fetch a specific contract by ID return null } async createContract(contract: Omit): Promise { // Implementation would create a new contract return {} as Contract } async updateContract(id: string, contract: Partial): Promise { // Implementation would update an existing contract return {} as Contract } async deleteContract(id: string): Promise { // Implementation would delete a contract return true } async changeContractStatus(id: string, status: ContractStatus, reason?: string): Promise { // Implementation would update just the status of a contract return {} as Contract } async generatePdf(id: string): Promise { // Implementation would generate a PDF version of the contract return "" } async sendForSignature(id: string, recipients: string[]): Promise { // Implementation would send the contract for electronic signature return true } async recordSignature(id: string, signedBy: string): Promise { // Implementation would record when a contract was signed return {} as Contract } async renewContract(id: string, changes?: Partial): Promise { // Implementation would create a renewal of an existing contract return {} as Contract } async getPaymentSchedule(id: string): Promise { // Implementation would get the payment schedule for a contract return [] } async updatePaymentStatus( contractId: string, paymentId: string, status: "paid" | "overdue" | "canceled", amount?: number, ): Promise { // Implementation would update the status of a payment return {} as Contract } } [V0_FILE]typescriptreact:file="modules/sales/services/customer-service.ts" import type { Customer, CustomerFilter, CustomerStatus } from "../types/customer" export class CustomerService { async getCustomers(filter?: CustomerFilter): Promise { // Implementation would fetch customers from API with optional filtering return [] } async getCustomerById(id: string): Promise { // Implementation would fetch a specific customer by ID return null } async createCustomer(customer: Omit): Promise { // Implementation would create a new customer return {} as Customer } async updateCustomer(id: string, customer: Partial): Promise { // Implementation would update an existing customer return {} as Customer } async deleteCustomer(id: string): Promise { // Implementation would delete a customer return true } async changeCustomerStatus(id: string, status: CustomerStatus): Promise { // Implementation would update just the status of a customer return {} as Customer } async assignCustomer(id: string, salesRepId: string): Promise { // Implementation would assign a customer to a sales rep return {} as Customer } async addContact(customerId: string, contact: Omit): Promise { // Implementation would add a contact to a customer return {} as Customer } async updateContact( customerId: string, contactId: string, contact: Partial, ): Promise { // Implementation would update a contact return {} as Customer } async deleteContact(customerId: string, contactId: string): Promise { // Implementation would delete a contact return {} as Customer } async getCustomerValue(id: string): Promise<{ totalRevenue: number averageOrderValue: number lifetimeValue: number contractCount: number }> { // Implementation would calculate the value of a customer return { totalRevenue: 0, averageOrderValue: 0, lifetimeValue: 0, contractCount: 0, } } async getCustomerActivity(id: string): Promise<{ lastContact?: Date lastPurchase?: Date interactions: { type: string; date: Date; description: string }[] }> { // Implementation would get the activity history for a customer return { interactions: [], } } } [V0_FILE]typescriptreact:file="modules/sales/services/sales-rep-service.ts" import type { SalesRep, SalesTarget } from "../types/sales-rep" export class SalesRepService { async getSalesReps(): Promise { // Implementation would fetch sales reps from API return [] } async getSalesRepById(id: string): Promise { // Implementation would fetch a specific sales rep by ID return null } async createSalesRep(salesRep: Omit): Promise { // Implementation would create a new sales rep return {} as SalesRep } async updateSalesRep(id: string, salesRep: Partial): Promise { // Implementation would update an existing sales rep return {} as SalesRep } async deleteSalesRep(id: string): Promise { // Implementation would delete a sales rep return true } async getSalesRepPerformance( id: string, period?: { start: Date; end: Date }, ): Promise { // Implementation would calculate performance metrics for a sales rep return {} as SalesRep["performanceMetrics"] } async setSalesTarget( salesRepId: string, target: Omit, ): Promise { // Implementation would set a sales target for a rep return {} as SalesTarget } async updateSalesTarget(salesRepId: string, targetId: string, target: Partial): Promise { // Implementation would update a sales target return {} as SalesTarget } async deleteSalesTarget(salesRepId: string, targetId: string): Promise { // Implementation would delete a sales target return true } async getTeamPerformance( managerIds: string[], period?: { start: Date; end: Date }, ): Promise<{ totalRevenue: number averageRevenue: number topPerformer: { id: string; name: string; revenue: number } performanceByRep: { id: string; name: string; revenue: number; target: number; achievement: number }[] }> { // Implementation would calculate team performance metrics return { totalRevenue: 0, averageRevenue: 0, topPerformer: { id: "", name: "", revenue: 0 }, performanceByRep: [], } } } [V0_FILE]typescriptreact:file="modules/sales/services/commission-service.ts" import type { Commission, CommissionPlan, CommissionStatus } from "../types/commission" export class CommissionService { async getCommissions(salesRepId?: string, status?: CommissionStatus[]): Promise { // Implementation would fetch commissions from API with optional filtering return [] } async getCommissionById(id: string): Promise { // Implementation would fetch a specific commission by ID return null } async calculateCommission(contractId: string): Promise { // Implementation would calculate commission for a contract return {} as Commission } async updateCommissionStatus(id: string, status: CommissionStatus): Promise { // Implementation would update the status of a commission return {} as Commission } async addAdjustment( commissionId: string, adjustment: Omit, ): Promise { // Implementation would add an adjustment to a commission return {} as Commission } async getCommissionPlans(): Promise { // Implementation would fetch commission plans return [] } async getCommissionPlanById(id: string): Promise { // Implementation would fetch a specific commission plan return null } async createCommissionPlan(plan: Omit): Promise { // Implementation would create a new commission plan return {} as CommissionPlan } async updateCommissionPlan(id: string, plan: Partial): Promise { // Implementation would update a commission plan return {} as CommissionPlan } async deleteCommissionPlan(id: string): Promise { // Implementation would delete a commission plan return true } async getSalesRepCommissionSummary( salesRepId: string, period?: { start: Date; end: Date }, ): Promise<{ totalCommission: number pendingCommission: number paidCommission: number commissionByMonth: Record }> { // Implementation would calculate commission summary for a sales rep return { totalCommission: 0, pendingCommission: 0, paidCommission: 0, commissionByMonth: {}, } } } [V0_FILE]typescriptreact:file="modules/sales/services/pipeline-service.ts" import type { Pipeline, PipelineStage, PipelineStats } from "../types/pipeline" import type { Opportunity, OpportunityStage } from "../types/opportunity" export class PipelineService { async getPipelines(): Promise { // Implementation would fetch pipelines from API return [] } async getPipelineById(id: string): Promise { // Implementation would fetch a specific pipeline by ID return null } async createPipeline(pipeline: Omit): Promise { // Implementation would create a new pipeline return {} as Pipeline } async updatePipeline(id: string, pipeline: Partial): Promise { // Implementation would update an existing pipeline return {} as Pipeline } async deletePipeline(id: string): Promise { // Implementation would delete a pipeline return true } async addStage(pipelineId: string, stage: Omit): Promise { // Implementation would add a stage to a pipeline return {} as PipelineStage } async updateStage(pipelineId: string, stageId: string, stage: Partial): Promise { // Implementation would update a pipeline stage return {} as PipelineStage } async deleteStage(pipelineId: string, stageId: string): Promise { // Implementation would delete a pipeline stage return true } async reorderStages(pipelineId: string, stageOrder: string[]): Promise { // Implementation would reorder the stages in a pipeline return {} as Pipeline } async getPipelineStats(pipelineId: string, period?: { start: Date; end: Date }): Promise { // Implementation would calculate statistics for a pipeline return {} as PipelineStats } async moveOpportunity(opportunityId: string, fromStageId: string, toStageId: string): Promise { // Implementation would move an opportunity from one stage to another return {} as Opportunity } async mapOpportunityStages(pipelineId: string): Promise> { // Implementation would map standard opportunity stages to pipeline stages return {} as Record } } [V0_FILE]typescriptreact:file="modules/sales/services/analytics-service.ts" export class SalesAnalyticsService { async getSalesByPeriod( period: { start: Date; end: Date }, groupBy: "day" | "week" | "month" | "quarter" | "year", ): Promise<{ labels: string[] data: number[] total: number average: number growth: number }> { // Implementation would calculate sales over time return { labels: [], data: [], total: 0, average: 0, growth: 0, } } async getSalesByProduct(period: { start: Date; end: Date }): Promise< { productId: string productName: string quantity: number revenue: number percentage: number }[] > { // Implementation would calculate sales by product return [] } async getSalesByRegion(period: { start: Date; end: Date }): Promise< { region: string revenue: number percentage: number growth: number }[] > { // Implementation would calculate sales by region return [] } async getSalesBySalesRep(period: { start: Date; end: Date }): Promise< { salesRepId: string salesRepName: string revenue: number deals: number averageDealSize: number percentage: number }[] > { // Implementation would calculate sales by sales rep return [] } async getConversionRates(period: { start: Date; end: Date }): Promise<{ overall: number byStage: { fromStage: string; toStage: string; rate: number }[] bySource: { source: string; rate: number }[] trend: { date: string; rate: number }[] }> { // Implementation would calculate conversion rates return { overall: 0, byStage: [], bySource: [], trend: [], } } async getSalesFunnel(period: { start: Date; end: Date }): Promise< { stage: string count: number value: number conversionRate: number }[] > { // Implementation would calculate the sales funnel return [] } async getLeadSourceAnalysis(period: { start: Date; end: Date }): Promise< { source: string leads: number opportunities: number deals: number revenue: number conversionRate: number costPerLead: number roi: number }[] > { // Implementation would analyze lead sources return [] } async getSalesVelocity(period: { start: Date; end: Date }): Promise<{ overall: number byStage: { stage: string; averageDays: number }[] byProduct: { product: string; averageDays: number }[] bySalesRep: { salesRep: string; averageDays: number }[] }> { // Implementation would calculate sales velocity return { overall: 0, byStage: [], byProduct: [], bySalesRep: [], } } async getWinLossAnalysis(period: { start: Date; end: Date }): Promise<{ winRate: number totalWon: number totalLost: number byReason: { reason: string; count: number; percentage: number }[] byCompetitor: { competitor: string; count: number; percentage: number }[] byProduct: { product: string; winRate: number }[] bySalesRep: { salesRep: string; winRate: number }[] }> { // Implementation would analyze win/loss reasons return { winRate: 0, totalWon: 0, totalLost: 0, byReason: [], byCompetitor: [], byProduct: [], bySalesRep: [], } } async getForecastAccuracy(period: { start: Date; end: Date }): Promise<{ overall: number byMonth: { month: string; forecasted: number; actual: number; accuracy: number }[] bySalesRep: { salesRep: string; accuracy: number }[] }> { // Implementation would calculate forecast accuracy return { overall: 0, byMonth: [], bySalesRep: [], } } } [V0_FILE]typescriptreact:file="modules/sales/services/integration-service.ts" export class SalesIntegrationService { async syncWithCRM(provider: "salesforce" | "hubspot" | "zoho" | "pipedrive"): Promise<{ success: boolean entitiesSynced: { leads: number opportunities: number customers: number contacts: number } errors?: string[] }> { // Implementation would sync data with a CRM system return { success: true, entitiesSynced: { leads: 0, opportunities: 0, customers: 0, contacts: 0, }, } } async syncWithERP(provider: "sap" | "oracle" | "netsuite"): Promise<{ success: boolean entitiesSynced: { customers: number products: number orders: number invoices: number } errors?: string[] }> { // Implementation would sync data with an ERP system return { success: true, entitiesSynced: { customers: 0, products: 0, orders: 0, invoices: 0, }, } } async syncWithEmailMarketing(provider: "mailchimp" | "sendgrid" | "constantcontact"): Promise<{ success: boolean entitiesSynced: { contacts: number campaigns: number lists: number } errors?: string[] }> { // Implementation would sync data with an email marketing system return { success: true, entitiesSynced: { contacts: 0, campaigns: 0, lists: 0, }, } } async syncWithCalendar(provider: "google" | "outlook" | "apple"): Promise<{ success: boolean entitiesSynced: { events: number meetings: number } errors?: string[] }> { // Implementation would sync data with a calendar system return { success: true, entitiesSynced: { events: 0, meetings: 0, }, } } async syncWithDocumentManagement(provider: "docusign" | "adobe" | "pandadoc"): Promise<{ success: boolean entitiesSynced: { proposals: number contracts: number signatures: number } errors?: string[] }> { // Implementation would sync data with a document management system return { success: true, entitiesSynced: { proposals: 0, contracts: 0, signatures: 0, }, } } async importFromCSV( entityType: "leads" | "opportunities" | "customers" | "contacts", file: File, ): Promise<{ success: boolean imported: number errors?: Record }> { // Implementation would import data from a CSV file return { success: true, imported: 0, } } async exportToCSV(entityType: "leads" | "opportunities" | "customers" | "contacts", filter?: any): Promise { // Implementation would export data to a CSV file return "" } async getIntegrationStatus(): Promise< { provider: string type: string lastSync?: Date status: "active" | "inactive" | "error" error?: string }[] > { // Implementation would get the status of all integrations return [] } } [V0_FILE]typescriptreact:file="modules/sales/hooks/index.ts" export * from "./use-leads" export * from "./use-opportunities" export * from "./use-proposals" export * from "./use-contracts" export * from "./use-customers" export * from "./use-sales-reps" export * from "./use-commissions" export * from "./use-pipeline" export * from "./use-sales-analytics" export * from "./use-sales-integrations" [V0_FILE]typescriptreact:file="modules/sales/hooks/use-opportunities.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { Opportunity, OpportunityFilter, OpportunityStage } from "../types/opportunity" import { OpportunityService } from "../services/opportunity-service" export function useOpportunities(initialFilter?: OpportunityFilter) { const [opportunities, setOpportunities] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [filter, setFilter] = useState(initialFilter) const opportunityService = new OpportunityService() const fetchOpportunities = useCallback(async () => { setLoading(true) setError(null) try { const data = await opportunityService.getOpportunities(filter) setOpportunities(data) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch opportunities") } finally { setLoading(false) } }, [filter]) useEffect(() => { fetchOpportunities() }, [fetchOpportunities]) const createOpportunity = async (opportunity: Omit) => { setLoading(true) setError(null) try { const newOpportunity = await opportunityService.createOpportunity(opportunity) setOpportunities((prev) => [...prev, newOpportunity]) return newOpportunity } catch (err) { setError(err instanceof Error ? err.message : "Failed to create opportunity") throw err } finally { setLoading(false) } } const updateOpportunity = async (id: string, opportunity: Partial) => { setLoading(true) setError(null) try { const updatedOpportunity = await opportunityService.updateOpportunity(id, opportunity) setOpportunities((prev) => prev.map((o) => (o.id === id ? updatedOpportunity : o))) return updatedOpportunity } catch (err) { setError(err instanceof Error ? err.message : "Failed to update opportunity") throw err } finally { setLoading(false) } } const deleteOpportunity = async (id: string) => { setLoading(true) setError(null) try { const success = await opportunityService.deleteOpportunity(id) if (success) { setOpportunities((prev) => prev.filter((o) => o.id !== id)) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to delete opportunity") throw err } finally { setLoading(false) } } const changeOpportunityStage = async (id: string, stage: OpportunityStage) => { setLoading(true) setError(null) try { const updatedOpportunity = await opportunityService.changeOpportunityStage(id, stage) setOpportunities((prev) => prev.map((o) => (o.id === id ? updatedOpportunity : o))) return updatedOpportunity } catch (err) { setError(err instanceof Error ? err.message : "Failed to change opportunity stage") throw err } finally { setLoading(false) } } const assignOpportunity = async (id: string, salesRepId: string) => { setLoading(true) setError(null) try { const updatedOpportunity = await opportunityService.assignOpportunity(id, salesRepId) setOpportunities((prev) => prev.map((o) => (o.id === id ? updatedOpportunity : o))) return updatedOpportunity } catch (err) { setError(err instanceof Error ? err.message : "Failed to assign opportunity") throw err } finally { setLoading(false) } } return { opportunities, loading, error, filter, setFilter, fetchOpportunities, createOpportunity, updateOpportunity, deleteOpportunity, changeOpportunityStage, assignOpportunity, } } [V0_FILE]typescriptreact:file="modules/sales/utils/index.ts" export * from "./format-utils" export * from "./validation-utils" export * from "./calculation-utils" export * from "./date-utils" export * from "./export-utils" export * from "./import-utils" export * from "./filter-utils" export * from "./sort-utils" [V0_FILE]typescriptreact:file="modules/sales/utils/format-utils.ts" export const formatCurrency = (value: number, currency = "BRL", locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { style: "currency", currency, }).format(value) } export const formatPercentage = (value: number, decimals = 2, locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { style: "percent", minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value / 100) } export const formatNumber = (value: number, decimals = 0, locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value) } export const formatPhoneNumber = (phone: string): string => { // Format Brazilian phone numbers if (!phone) return "" // Remove non-numeric characters const cleaned = phone.replace(/\D/g, "") // Format according to length if (cleaned.length === 11) { // Mobile with DDD return `(${cleaned.substring(0, 2)}) ${cleaned.substring(2, 7)}-${cleaned.substring(7)}` } else if (cleaned.length === 10) { // Landline with DDD return `(${cleaned.substring(0, 2)}) ${cleaned.substring(2, 6)}-${cleaned.substring(6)}` } else if (cleaned.length === 9) { // Mobile without DDD return `${cleaned.substring(0, 5)}-${cleaned.substring(5)}` } else if (cleaned.length === 8) { // Landline without DDD return `${cleaned.substring(0, 4)}-${cleaned.substring(4)}` } // Return as is if it doesn't match expected formats return phone } export const formatCNPJ = (cnpj: string): string => { // Format Brazilian CNPJ if (!cnpj) return "" // Remove non-numeric characters const cleaned = cnpj.replace(/\D/g, "") // Check if it has the correct length if (cleaned.length !== 14) return cnpj // Format as XX.XXX.XXX/XXXX-XX return `${cleaned.substring(0, 2)}.${cleaned.substring(2, 5)}.${cleaned.substring(5, 8)}/${cleaned.substring(8, 12)}-${cleaned.substring(12)}` } export const formatCPF = (cpf: string): string => { // Format Brazilian CPF if (!cpf) return "" // Remove non-numeric characters const cleaned = cpf.replace(/\D/g, "") // Check if it has the correct length if (cleaned.length !== 11) return cpf // Format as XXX.XXX.XXX-XX return `${cleaned.substring(0, 3)}.${cleaned.substring(3, 6)}.${cleaned.substring(6, 9)}-${cleaned.substring(9)}` } export const truncateText = (text: string, maxLength: number): string => { if (!text || text.length <= maxLength) return text return `${text.substring(0, maxLength)}...` } export const capitalizeFirstLetter = (text: string): string => { if (!text) return "" return text.charAt(0).toUpperCase() + text.slice(1) } [V0_FILE]typescriptreact:file="modules/sales/utils/validation-utils.ts" export const isValidEmail = (email: string): boolean => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export const isValidPhone = (phone: string): boolean => { // Validate Brazilian phone numbers // Remove non-numeric characters const cleaned = phone.replace(/\D/g, "") // Check if it has a valid length for Brazilian numbers return cleaned.length >= 10 && cleaned.length <= 11 } export const isValidCNPJ = (cnpj: string): boolean => { // Validate Brazilian CNPJ cnpj = cnpj.replace(/[^\d]/g, "") if (cnpj.length !== 14) return false // Check for known invalid patterns if (/^(\d)\1+$/.test(cnpj)) return false // Validate check digits let size = cnpj.length - 2 let numbers = cnpj.substring(0, size) const digits = cnpj.substring(size) let sum = 0 let pos = size - 7 for (let i = size; i >= 1; i--) { sum += Number.parseInt(numbers.charAt(size - i)) * pos-- if (pos < 2) pos = 9 } let result = sum % 11 < 2 ? 0 : 11 - (sum % 11) if (result !== Number.parseInt(digits.charAt(0))) return false size = size + 1 numbers = cnpj.substring(0, size) sum = 0 pos = size - 7 for (let i = size; i >= 1; i--) { sum += Number.parseInt(numbers.charAt(size - i)) * pos-- if (pos < 2) pos = 9 } result = sum % 11 < 2 ? 0 : 11 - (sum % 11) return result === Number.parseInt(digits.charAt(1)) } export const isValidCPF = (cpf: string): boolean => { // Validate Brazilian CPF cpf = cpf.replace(/[^\d]/g, "") if (cpf.length !== 11) return false // Check for known invalid patterns if (/^(\d)\1+$/.test(cpf)) return false // Validate first check digit let sum = 0 for (let i = 0; i < 9; i++) { sum += Number.parseInt(cpf.charAt(i)) * (10 - i) } let result = 11 - (sum % 11) if (result === 10 || result === 11) result = 0 if (result !== Number.parseInt(cpf.charAt(9))) return false // Validate second check digit sum = 0 for (let i = 0; i < 10; i++) { sum += Number.parseInt(cpf.charAt(i)) * (11 - i) } result = 11 - (sum % 11) if (result === 10 || result === 11) result = 0 return result === Number.parseInt(cpf.charAt(10)) } export const isValidZipCode = (zipCode: string): boolean => { // Validate Brazilian ZIP code (CEP) const cleaned = zipCode.replace(/\D/g, "") return cleaned.length === 8 } export const isValidCurrency = (value: string): boolean => { // Validate currency format const currencyRegex = /^R?\$?\s?(\d{1,3}(\.\d{3})*|\d+)(,\d{2})?$/ return currencyRegex.test(value) } export const isValidDate = (date: string): boolean => { // Validate date format (DD/MM/YYYY) const dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/ if (!dateRegex.test(date)) return false // Check if it's a valid date const [day, month, year] = date.split("/").map(Number) const dateObj = new Date(year, month - 1, day) return dateObj.getFullYear() === year && dateObj.getMonth() === month - 1 && dateObj.getDate() === day } export const isRequired = (value: any): boolean => { if (value === null || value === undefined) return false if (typeof value === "string") return value.trim().length > 0 return true } export const minLength = (value: string, min: number): boolean => { if (!value) return false return value.length >= min } export const maxLength = (value: string, max: number): boolean => { if (!value) return true return value.length <= max } export const isNumber = (value: any): boolean => { if (typeof value === "number") return true if (typeof value !== "string") return false return !isNaN(Number(value)) } export const isPositive = (value: number): boolean => { return value > 0 } export const isNonNegative = (value: number): boolean => { return value >= 0 } [V0_FILE]typescriptreact:file="modules/sales/utils/calculation-utils.ts" export const calculateDiscount = (value: number, discountPercentage: number): number => { return value * (discountPercentage / 100) } export const calculateTotal = (items: { quantity: number; unitPrice: number; discount?: number }[]): number => { return items.reduce((total, item) => { const itemTotal = item.quantity * item.unitPrice const discount = item.discount || 0 return total + (itemTotal - discount) }, 0) } export const calculateTax = (value: number, taxRate: number): number => { return value * (taxRate / 100) } export const calculateCommission = (value: number, commissionRate: number): number => { return value * (commissionRate / 100) } export const calculateGrowth = (current: number, previous: number): number => { if (previous === 0) return current > 0 ? 100 : 0 return ((current - previous) / previous) * 100 } export const calculateAverage = (values: number[]): number => { if (values.length === 0) return 0 const sum = values.reduce((acc, val) => acc + val, 0) return sum / values.length } export const calculateMedian = (values: number[]): number => { if (values.length === 0) return 0 const sorted = [...values].sort((a, b) => a - b) const middle = Math.floor(sorted.length / 2) if (sorted.length % 2 === 0) { return (sorted[middle - 1] + sorted[middle]) / 2 } return sorted[middle] } export const calculatePercentage = (value: number, total: number): number => { if (total === 0) return 0 return (value / total) * 100 } export const calculateConversionRate = (conversions: number, total: number): number => { if (total === 0) return 0 return (conversions / total) * 100 } export const calculateROI = (revenue: number, cost: number): number => { if (cost === 0) return 0 return ((revenue - cost) / cost) * 100 } export const calculatePaybackPeriod = (investment: number, annualReturn: number): number => { if (annualReturn === 0) return Number.POSITIVE_INFINITY return investment / annualReturn } export const calculateNetPresentValue = ( initialInvestment: number, cashFlows: number[], discountRate: number, ): number => { let npv = -initialInvestment for (let i = 0; i < cashFlows.length; i++) { npv += cashFlows[i] / Math.pow(1 + discountRate, i + 1) } return npv } export const calculateInternalRateOfReturn = (initialInvestment: number, cashFlows: number[]): number => { // Simple IRR approximation using trial and error let irr = 0.1 // Start with 10% const maxIterations = 100 const tolerance = 0.0001 for (let i = 0; i < maxIterations; i++) { const npv = calculateNetPresentValue(initialInvestment, cashFlows, irr) if (Math.abs(npv) < tolerance) { return irr * 100 // Convert to percentage } // Adjust IRR based on NPV irr = irr + (npv > 0 ? 0.01 : -0.01) // Prevent infinite loop for impossible IRR if (irr < 0 || irr > 1) { return Number.NaN } } return Number.NaN // Could not converge } export const calculateBreakEvenPoint = (fixedCosts: number, unitPrice: number, unitVariableCost: number): number => { const contributionMargin = unitPrice - unitVariableCost if (contributionMargin <= 0) return Number.POSITIVE_INFINITY return fixedCosts / contributionMargin } [V0_FILE]typescriptreact:file="modules/sales/components/index.ts" export * from "./leads" export * from "./opportunities" export * from "./proposals" export * from "./contracts" export * from "./customers" export * from "./sales-reps" export * from "./commissions" export * from "./pipeline" export * from "./analytics" export * from "./dashboard" [V0_FILE]typescriptreact:file="modules/sales/components/leads/index.ts" export * from "./lead-list" export * from "./lead-form" export * from "./lead-detail" export * from "./lead-filter" export * from "./lead-import" export * from "./lead-export" export * from "./lead-conversion" export * from "./lead-assignment" [V0_FILE]typescriptreact:file="modules/sales/components/opportunities/index.ts" export * from "./opportunity-list" export * from "./opportunity-form" export * from "./opportunity-detail" export * from "./opportunity-filter" export * from "./opportunity-kanban" export * from "./opportunity-forecast" export * from "./opportunity-timeline" export * from "./opportunity-assignment" [V0_FILE]typescriptreact:file="modules/sales/components/opportunities/opportunity-kanban.tsx" "use client" import type React from "react" import { useState, useEffect } from "react" import { useOpportunities } from "../../hooks/use-opportunities" import { type Opportunity, OpportunityStage } from "../../types/opportunity" import { formatCurrency } from "../../utils/format-utils" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { MoreHorizontal, Edit, Trash, UserPlus, ExternalLink, Calendar, DollarSign } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { formatDate } from "../../utils/date-utils" interface OpportunityKanbanProps { onEdit?: (opportunity: Opportunity) => void onDelete?: (opportunity: Opportunity) => void onView?: (opportunity: Opportunity) => void onAssign?: (opportunity: Opportunity) => void onStageChange?: (opportunity: Opportunity, stage: OpportunityStage) => void } export function OpportunityKanban({ onEdit, onDelete, onView, onAssign, onStageChange }: OpportunityKanbanProps) { const { opportunities, loading, error, changeOpportunityStage } = useOpportunities() const [groupedOpportunities, setGroupedOpportunities] = useState>( {} as Record, ) const [draggingId, setDraggingId] = useState(null) useEffect(() => { if (opportunities.length > 0) { const grouped = Object.values(OpportunityStage).reduce( (acc, stage) => { acc[stage] = opportunities.filter((opp) => opp.stage === stage) return acc }, {} as Record, ) setGroupedOpportunities(grouped) } }, [opportunities]) const handleDragStart = (e: React.DragEvent, opportunityId: string) => { e.dataTransfer.setData("opportunityId", opportunityId) setDraggingId(opportunityId) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() } const handleDrop = async (e: React.DragEvent, targetStage: OpportunityStage) => { e.preventDefault() const opportunityId = e.dataTransfer.getData("opportunityId") setDraggingId(null) const opportunity = opportunities.find((opp) => opp.id === opportunityId) if (opportunity && opportunity.stage !== targetStage) { try { await changeOpportunityStage(opportunityId, targetStage) onStageChange?.(opportunity, targetStage) } catch (error) { console.error("Failed to change opportunity stage:", error) } } } const getStageColor = (stage: OpportunityStage) => { switch (stage) { case OpportunityStage.QUALIFICATION: return "bg-blue-100 border-blue-300" case OpportunityStage.NEEDS_ANALYSIS: return "bg-indigo-100 border-indigo-300" case OpportunityStage.PROPOSAL: return "bg-purple-100 border-purple-300" case OpportunityStage.NEGOTIATION: return "bg-yellow-100 border-yellow-300" case OpportunityStage.CLOSED_WON: return "bg-green-100 border-green-300" case OpportunityStage.CLOSED_LOST: return "bg-red-100 border-red-300" default: return "bg-gray-100 border-gray-300" } } const getStageBadgeColor = (stage: OpportunityStage) => { switch (stage) { case OpportunityStage.QUALIFICATION: return "bg-blue-500" case OpportunityStage.NEEDS_ANALYSIS: return "bg-indigo-500" case OpportunityStage.PROPOSAL: return "bg-purple-500" case OpportunityStage.NEGOTIATION: return "bg-yellow-500" case OpportunityStage.CLOSED_WON: return "bg-green-500" case OpportunityStage.CLOSED_LOST: return "bg-red-500" default: return "bg-gray-500" } } const getStageTitle = (stage: OpportunityStage): string => { switch (stage) { case OpportunityStage.QUALIFICATION: return "Qualification" case OpportunityStage.NEEDS_ANALYSIS: return "Needs Analysis" case OpportunityStage.PROPOSAL: return "Proposal" case OpportunityStage.NEGOTIATION: return "Negotiation" case OpportunityStage.CLOSED_WON: return "Closed Won" case OpportunityStage.CLOSED_LOST: return "Closed Lost" default: return stage } } if (error) { return

Error: {error}

} return ( Opportunity Pipeline {loading ? (

) : (

{Object.values(OpportunityStage).map((stage) => (

handleDrop(e, stage)} >

{getStageTitle(stage)} {groupedOpportunities[stage]?.length || 0}

{groupedOpportunities[stage]?.map((opportunity) => (

handleDragStart(e, opportunity.id)} >

{opportunity.title}

Actions onView?.(opportunity)}> View onEdit?.(opportunity)}> Edit onAssign?.(opportunity)}> Assign Move To {Object.values(OpportunityStage).map((s) => ( changeOpportunityStage(opportunity.id, s)} disabled={opportunity.stage === s} > {getStageTitle(s)} ))} onDelete?.(opportunity)} className="text-red-600"> Delete

{formatCurrency(opportunity.value)} • {opportunity.probability}%

{formatDate(opportunity.expectedCloseDate)}

))} {(!groupedOpportunities[stage] || groupedOpportunities[stage].length === 0) && (

No opportunities

)}

))}

)} ) } [V0_FILE]typescriptreact:file="modules/sales/components/proposals/index.ts" export * from "./proposal-list" export * from "./proposal-form" export * from "./proposal-detail" export * from "./proposal-filter" export * from "./proposal-preview" export * from "./proposal-items-editor" export * from "./proposal-send-dialog" export * from "./proposal-version-history" [V0_FILE]typescriptreact:file="modules/sales/components/contracts/index.ts" export * from "./contract-list" export * from "./contract-form" export * from "./contract-detail" export * from "./contract-filter" export * from "./contract-preview" export * from "./contract-signature" export * from "./contract-payment-schedule" export * from "./contract-renewal" [V0_FILE]typescriptreact:file="modules/sales/components/customers/index.ts" export * from "./customer-list" export * from "./customer-form" export * from "./customer-detail" export * from "./customer-filter" export * from "./customer-contacts" export * from "./customer-activity" export * from "./customer-value" export * from "./customer-map" [V0_FILE]typescriptreact:file="modules/sales/components/sales-reps/index.ts" export * from "./sales-rep-list" export * from "./sales-rep-form" export * from "./sales-rep-detail" export * from "./sales-rep-performance" export * from "./sales-rep-targets" export * from "./sales-rep-territory" export * from "./team-performance" export * from "./sales-rep-leaderboard" [V0_FILE]typescriptreact:file="modules/sales/components/commissions/index.ts" export * from "./commission-list" export * from "./commission-detail" export * from "./commission-calculator" export * from "./commission-plan-editor" export * from "./commission-report" export * from "./commission-approval" export * from "./commission-payment" export * from "./commission-dashboard" [V0_FILE]typescriptreact:file="modules/sales/components/pipeline/index.ts" export * from "./pipeline-view" export * from "./pipeline-editor" export * from "./pipeline-stats" export * from "./pipeline-forecast" export * from "./pipeline-conversion" export * from "./pipeline-velocity" export * from "./pipeline-comparison" export * from "./pipeline-history" [V0_FILE]typescriptreact:file="modules/sales/components/analytics/index.ts" export * from "./sales-overview" export * from "./sales-by-period" export * from "./sales-by-product" export * from "./sales-by-region" export * from "./sales-by-rep" export * from "./conversion-rates" export * from "./sales-funnel" export * from "./lead-source-analysis" [V0_FILE]typescriptreact:file="modules/sales/components/dashboard/index.ts" export * from "./sales-dashboard" export * from "./rep-dashboard" export * from "./manager-dashboard" export * from "./executive-dashboard" export * from "./performance-metrics" export * from "./activity-feed" export * from "./upcoming-tasks" export * from "./recent-deals" [V0_FILE]typescriptreact:file="modules/sales/components/dashboard/sales-dashboard.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { LineChart, PieChart, Activity, DollarSign, Users, Target, Calendar, TrendingUp, TrendingDown, } from "lucide-react" import { formatCurrency } from "../../utils/format-utils" export function SalesDashboard() { const [period, setPeriod] = useState<"day" | "week" | "month" | "quarter" | "year">("month") // This would come from a real data source const dashboardData = { totalRevenue: 1250000, revenueGrowth: 12.5, totalOpportunities: 87, opportunitiesGrowth: 8.3, totalLeads: 245, leadsGrowth: 15.2, conversionRate: 22.4, conversionRateGrowth: 3.1, averageDealSize: 14367, averageDealSizeGrowth: 4.2, winRate: 68, winRateGrowth: -2.3, salesCycle: 32, salesCycleGrowth: -5.1, topPerformers: [ { id: "1", name: "Ana Silva", revenue: 320000 }, { id: "2", name: "Carlos Mendes", revenue: 280000 }, { id: "3", name: "Juliana Costa", revenue: 210000 }, ], revenueByProduct: [ { product: "Residential Solar", revenue: 520000, percentage: 41.6 }, { product: "Commercial Solar", revenue: 380000, percentage: 30.4 }, { product: "Industrial Solar", revenue: 210000, percentage: 16.8 }, { product: "Maintenance", revenue: 140000, percentage: 11.2 }, ], revenueByMonth: [ { month: "Jan", revenue: 85000 }, { month: "Feb", revenue: 92000 }, { month: "Mar", revenue: 105000 }, { month: "Apr", revenue: 110000 }, { month: "May", revenue: 115000 }, { month: "Jun", revenue: 125000 }, { month: "Jul", revenue: 130000 }, { month: "Aug", revenue: 135000 }, { month: "Sep", revenue: 120000 }, { month: "Oct", revenue: 110000 }, { month: "Nov", revenue: 105000 }, { month: "Dec", revenue: 118000 }, ], upcomingDeals: [ { id: "1", title: "Condomínio Solar Ville", value: 85000, probability: 80, expectedCloseDate: new Date(2023, 10, 15), }, { id: "2", title: "Indústria Têxtil Nacional", value: 120000, probability: 65, expectedCloseDate: new Date(2023, 10, 22), }, { id: "3", title: "Rede de Supermercados Bom Preço", value: 95000, probability: 75, expectedCloseDate: new Date(2023, 10, 28), }, ], } return (

Sales Dashboard

Total Revenue

{formatCurrency(dashboardData.totalRevenue)}

= 0 ? "bg-green-100" : "bg-red-100"}`}> = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.revenueGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`}> {dashboardData.revenueGrowth}% from last {period}

Opportunities

{dashboardData.totalOpportunities}

= 0 ? "bg-green-100" : "bg-red-100"}`} > = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.opportunitiesGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`}> {dashboardData.opportunitiesGrowth}% from last {period}

Leads

{dashboardData.totalLeads}

= 0 ? "bg-green-100" : "bg-red-100"}`}> = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.leadsGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`}> {dashboardData.leadsGrowth}% from last {period}

Conversion Rate

{dashboardData.conversionRate}%

= 0 ? "bg-green-100" : "bg-red-100"}`} > = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.conversionRateGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`} > {dashboardData.conversionRateGrowth}% from last {period}

Revenue Trend

Revenue chart would render here

Revenue by Product

Product revenue chart would render here

Top Performers

{dashboardData.topPerformers.map((performer, index) => (

{index + 1}

{performer.name}

{formatCurrency(performer.revenue)}

))}

Performance Metrics

Average Deal Size

{formatCurrency(dashboardData.averageDealSize)} = 0 ? "text-green-600" : "text-red-600"}`} > {dashboardData.averageDealSizeGrowth >= 0 ? "+" : ""} {dashboardData.averageDealSizeGrowth}%

Win Rate

{dashboardData.winRate}% = 0 ? "text-green-600" : "text-red-600"}`}> {dashboardData.winRateGrowth >= 0 ? "+" : ""} {dashboardData.winRateGrowth}%

Sales Cycle

{dashboardData.salesCycle} days {dashboardData.salesCycleGrowth <= 0 ? "" : "+"} {dashboardData.salesCycleGrowth}%

Upcoming Deals

{dashboardData.upcomingDeals.map((deal) => (

{deal.title}

{formatCurrency(deal.value)}

{deal.probability}%

{deal.expectedCloseDate.toLocaleDateString()}

))}

) } [V0_FILE]typescriptreact:file="modules/sales/contexts/index.ts" export * from "./sales-context" export * from "./lead-context" export * from "./opportunity-context" export * from "./proposal-context" export * from "./contract-context" export * from "./customer-context" export * from "./sales-rep-context" export * from "./commission-context" export * from "./pipeline-context" [V0_FILE]typescriptreact:file="modules/sales/contexts/sales-context.tsx" "use client" import { createContext, useContext, type ReactNode, useState, useEffect } from "react" import { LeadService } from "../services/lead-service" import { OpportunityService } from "../services/opportunity-service" import { ProposalService } from "../services/proposal-service" import { ContractService } from "../services/contract-service" import { CustomerService } from "../services/customer-service" import { SalesRepService } from "../services/sales-rep-service" import { CommissionService } from "../services/commission-service" import { PipelineService } from "../services/pipeline-service" import { SalesAnalyticsService } from "../services/analytics-service" import { SalesIntegrationService } from "../services/integration-service" interface SalesContextType { leadService: LeadService opportunityService: OpportunityService proposalService: ProposalService contractService: ContractService customerService: CustomerService salesRepService: SalesRepService commissionService: CommissionService pipelineService: PipelineService analyticsService: SalesAnalyticsService integrationService: SalesIntegrationService isInitialized: boolean error: string | null } const SalesContext = createContext(undefined) export function SalesProvider({ children }: { children: ReactNode }) { const [isInitialized, setIsInitialized] = useState(false) const [error, setError] = useState(null) // Initialize services const leadService = new LeadService() const opportunityService = new OpportunityService() const proposalService = new ProposalService() const contractService = new ContractService() const customerService = new CustomerService() const salesRepService = new SalesRepService() const commissionService = new CommissionService() const pipelineService = new PipelineService() const analyticsService = new SalesAnalyticsService() const integrationService = new SalesIntegrationService() useEffect(() => { // Perform any initialization logic here try { // Example: Load initial data, check authentication, etc. setIsInitialized(true) } catch (err) { setError(err instanceof Error ? err.message : "Failed to initialize sales module") } }, []) return ( {children} ) } export function useSales() { const context = useContext(SalesContext) if (context === undefined) { throw new Error("useSales must be used within a SalesProvider") } return context } [V0_FILE]typescriptreact:file="modules/sales/constants/index.ts" export * from "./lead-constants" export * from "./opportunity-constants" export * from "./proposal-constants" export * from "./contract-constants" export * from "./customer-constants" export * from "./sales-rep-constants" export * from "./commission-constants" export * from "./pipeline-constants" [V0_FILE]typescriptreact:file="modules/sales/constants/lead-constants.ts" import { LeadStatus } from "../types/lead" export const LEAD_SOURCES = [ "Website", "Referral", "Social Media", "Email Campaign", "Trade Show", "Cold Call", "Partner", "Advertisement", "Webinar", "Other", ] export const LEAD_STATUS_LABELS: Record = { [LeadStatus.NEW]: "Novo", [LeadStatus.CONTACTED]: "Contatado", [LeadStatus.QUALIFIED]: "Qualificado", [LeadStatus.DISQUALIFIED]: "Desqualificado", [LeadStatus.CONVERTED]: "Convertido", } export const LEAD_STATUS_DESCRIPTIONS: Record = { [LeadStatus.NEW]: "Lead recém-criado, ainda não contatado", [LeadStatus.CONTACTED]: "Lead já foi contatado pela equipe de vendas", [LeadStatus.QUALIFIED]: "Lead qualificado e pronto para ser convertido em oportunidade", [LeadStatus.DISQUALIFIED]: "Lead não qualificado para prosseguir no processo de vendas", [LeadStatus.CONVERTED]: "Lead convertido em oportunidade", } export const LEAD_SCORE_THRESHOLDS = { COLD: 0, WARM: 30, HOT: 70, } export const LEAD_SCORE_FACTORS = { WEBSITE_VISIT: 5, FORM_SUBMISSION: 10, EMAIL_OPEN: 2, EMAIL_CLICK: 5, DOWNLOAD: 15, WEBINAR_REGISTRATION: 20, WEBINAR_ATTENDANCE: 25, DEMO_REQUEST: 30, MULTIPLE_CONTACTS: 15, SOCIAL_ENGAGEMENT: 5, } export const DEFAULT_LEAD_FIELDS = [ "name", "email", "phone", "address", "city", "state", "zipCode", "source", "status", "notes", ] export const CUSTOM_LEAD_FIELDS = [ "company", "position", "industry", "website", "budget", "timeline", "requirements", "interests", ] export const LEAD_IMPORT_TEMPLATE_URL = "/templates/lead-import-template.csv" export const LEAD_CONVERSION_STEPS = [ "Qualificação", "Criação de Oportunidade", "Associação de Contatos", "Definição de Produtos", "Configuração de Pipeline", ] [V0_FILE]typescriptreact:file="app/sales/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { SalesDashboard } from "@/modules/sales/components/dashboard/sales-dashboard" export default function SalesPage() { return (

) } [V0_FILE]typescriptreact:file="app/sales/opportunities/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { OpportunityKanban } from "@/modules/sales/components/opportunities/opportunity-kanban" export default function OpportunitiesPage() { return (

Oportunidades

) } [V0_FILE]typescriptreact:file="app/sales/proposals/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { ProposalList } from "@/modules/sales/components/proposals/proposal-list" export default function ProposalsPage() { return (

Propostas

) } [V0_FILE]typescriptreact:file="app/sales/contracts/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { ContractList } from "@/modules/sales/components/contracts/contract-list" export default function ContractsPage() { return (

Contratos

) } [V0_FILE]typescriptreact:file="app/sales/customers/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { CustomerList } from "@/modules/sales/components/customers/customer-list" export default function CustomersPage() { return (

Clientes

) } [V0_FILE]typescriptreact:file="app/sales/analytics/page.tsx" import { SalesProvider } from "@/modules/sales/contexts/sales-context" import { SalesOverview } from "@/modules/sales/components/analytics/sales-overview" export default function AnalyticsPage() { return (

Análise de Vendas

) } [V0_FILE]typescriptreact:file="app/api/sales/leads/route.ts" import { type NextRequest, NextResponse } from "next/server" import { LeadService } from "@/modules/sales/services/lead-service" const leadService = new LeadService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const status = searchParams.getAll("status") const source = searchParams.getAll("source") const assignedTo = searchParams.getAll("assignedTo") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const tags = searchParams.getAll("tags") // Build filter object const filter: any = {} if (status.length > 0) filter.status = status if (source.length > 0) filter.source = source if (assignedTo.length > 0) filter.assignedTo = assignedTo if (search) filter.search = search if (tags.length > 0) filter.tags = tags if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } const leads = await leadService.getLeads(filter) return NextResponse.json(leads) } catch (error) { console.error("Error fetching leads:", error) return NextResponse.json({ error: "Failed to fetch leads" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const leadData = await request.json() const newLead = await leadService.createLead(leadData) return NextResponse.json(newLead, { status: 201 }) } catch (error) { console.error("Error creating lead:", error) return NextResponse.json({ error: "Failed to create lead" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/leads/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { LeadService } from "@/modules/sales/services/lead-service" const leadService = new LeadService() export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const lead = await leadService.getLeadById(params.id) if (!lead) { return NextResponse.json({ error: "Lead not found" }, { status: 404 }) } return NextResponse.json(lead) } catch (error) { console.error("Error fetching lead:", error) return NextResponse.json({ error: "Failed to fetch lead" }, { status: 500 }) } } export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const leadData = await request.json() const updatedLead = await leadService.updateLead(params.id, leadData) return NextResponse.json(updatedLead) } catch (error) { console.error("Error updating lead:", error) return NextResponse.json({ error: "Failed to update lead" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const success = await leadService.deleteLead(params.id) if (!success) { return NextResponse.json({ error: "Failed to delete lead" }, { status: 400 }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting lead:", error) return NextResponse.json({ error: "Failed to delete lead" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/opportunities/route.ts" import { type NextRequest, NextResponse } from "next/server" import { OpportunityService } from "@/modules/sales/services/opportunity-service" const opportunityService = new OpportunityService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const stage = searchParams.getAll("stage") const assignedTo = searchParams.getAll("assignedTo") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const minValue = searchParams.get("minValue") const maxValue = searchParams.get("maxValue") const products = searchParams.getAll("products") // Build filter object const filter: any = {} if (stage.length > 0) filter.stage = stage if (assignedTo.length > 0) filter.assignedTo = assignedTo if (search) filter.search = search if (products.length > 0) filter.products = products if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } if (minValue && maxValue) { filter.valueRange = { min: Number(minValue), max: Number(maxValue), } } const opportunities = await opportunityService.getOpportunities(filter) return NextResponse.json(opportunities) } catch (error) { console.error("Error fetching opportunities:", error) return NextResponse.json({ error: "Failed to fetch opportunities" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const opportunityData = await request.json() const newOpportunity = await opportunityService.createOpportunity(opportunityData) return NextResponse.json(newOpportunity, { status: 201 }) } catch (error) { console.error("Error creating opportunity:", error) return NextResponse.json({ error: "Failed to create opportunity" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/opportunities/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { OpportunityService } from "@/modules/sales/services/opportunity-service" const opportunityService = new OpportunityService() export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const opportunity = await opportunityService.getOpportunityById(params.id) if (!opportunity) { return NextResponse.json({ error: "Opportunity not found" }, { status: 404 }) } return NextResponse.json(opportunity) } catch (error) { console.error("Error fetching opportunity:", error) return NextResponse.json({ error: "Failed to fetch opportunity" }, { status: 500 }) } } export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const opportunityData = await request.json() const updatedOpportunity = await opportunityService.updateOpportunity(params.id, opportunityData) return NextResponse.json(updatedOpportunity) } catch (error) { console.error("Error updating opportunity:", error) return NextResponse.json({ error: "Failed to update opportunity" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const success = await opportunityService.deleteOpportunity(params.id) if (!success) { return NextResponse.json({ error: "Failed to delete opportunity" }, { status: 400 }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting opportunity:", error) return NextResponse.json({ error: "Failed to delete opportunity" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/proposals/route.ts" import { type NextRequest, NextResponse } from "next/server" import { ProposalService } from "@/modules/sales/services/proposal-service" const proposalService = new ProposalService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const status = searchParams.getAll("status") const createdBy = searchParams.getAll("createdBy") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const minValue = searchParams.get("minValue") const maxValue = searchParams.get("maxValue") // Build filter object const filter: any = {} if (status.length > 0) filter.status = status if (createdBy.length > 0) filter.createdBy = createdBy if (search) filter.search = search if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } if (minValue && maxValue) { filter.valueRange = { min: Number(minValue), max: Number(maxValue), } } const proposals = await proposalService.getProposals(filter) return NextResponse.json(proposals) } catch (error) { console.error("Error fetching proposals:", error) return NextResponse.json({ error: "Failed to fetch proposals" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const proposalData = await request.json() const newProposal = await proposalService.createProposal(proposalData) return NextResponse.json(newProposal, { status: 201 }) } catch (error) { console.error("Error creating proposal:", error) return NextResponse.json({ error: "Failed to create proposal" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/contracts/route.ts" import { type NextRequest, NextResponse } from "next/server" import { ContractService } from "@/modules/sales/services/contract-service" const contractService = new ContractService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const status = searchParams.getAll("status") const type = searchParams.getAll("type") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const minValue = searchParams.get("minValue") const maxValue = searchParams.get("maxValue") // Build filter object const filter: any = {} if (status.length > 0) filter.status = status if (type.length > 0) filter.type = type if (search) filter.search = search if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } if (minValue && maxValue) { filter.valueRange = { min: Number(minValue), max: Number(maxValue), } } const contracts = await contractService.getContracts(filter) return NextResponse.json(contracts) } catch (error) { console.error("Error fetching contracts:", error) return NextResponse.json({ error: "Failed to fetch contracts" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const contractData = await request.json() const newContract = await contractService.createContract(contractData) return NextResponse.json(newContract, { status: 201 }) } catch (error) { console.error("Error creating contract:", error) return NextResponse.json({ error: "Failed to create contract" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/sales/customers/route.ts" import { type NextRequest, NextResponse } from "next/server" import { CustomerService } from "@/modules/sales/services/customer-service" const customerService = new CustomerService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const type = searchParams.getAll("type") const segment = searchParams.getAll("segment") const status = searchParams.getAll("status") const assignedTo = searchParams.getAll("assignedTo") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const tags = searchParams.getAll("tags") // Build filter object const filter: any = {} if (type.length > 0) filter.type = type if (segment.length > 0) filter.segment = segment if (status.length > 0) filter.status = status if (assignedTo.length > 0) filter.assignedTo = assignedTo if (search) filter.search = search if (tags.length > 0) filter.tags = tags if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } const customers = await customerService.getCustomers(filter) return NextResponse.json(customers) } catch (error) { console.error("Error fetching customers:", error) return NextResponse.json({ error: "Failed to fetch customers" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const customerData = await request.json() const newCustomer = await customerService.createCustomer(customerData) return NextResponse.json(newCustomer, { status: 201 }) } catch (error) { console.error("Error creating customer:", error) return NextResponse.json({ error: "Failed to create customer" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="modules/installation/index.ts" export * from "./components" export * from "./services" export * from "./hooks" export * from "./types" export * from "./utils" export * from "./constants" export * from "./contexts" export * from "./providers" [V0_FILE]typescriptreact:file="modules/installation/types/index.ts" export * from "./installation-project" export * from "./schedule" export * from "./team" export * from "./equipment" export * from "./inspection" export * from "./checklist" export * from "./document" export * from "./notification" export * from "./task" export * from "./progress" [V0_FILE]typescriptreact:file="modules/installation/types/installation-project.ts" import type { Team } from "./team" import type { Schedule } from "./schedule" import type { Equipment } from "./equipment" import type { Inspection } from "./inspection" import type { Document } from "./document" import type { Task } from "./task" import type { Progress } from "./progress" export interface InstallationProject { id: string salesProjectId: string designProjectId: string customerId: string title: string description?: string status: InstallationStatus priority: Priority startDate?: Date endDate?: Date actualStartDate?: Date actualEndDate?: Date location: { address: string city: string state: string zipCode: string coordinates?: { latitude: number longitude: number } } systemSize: number // em kWp panelCount: number inverterCount: number teams?: Team[] schedule?: Schedule equipmentList?: Equipment[] inspections?: Inspection[] documents?: Document[] tasks?: Task[] progress?: Progress notes?: string createdAt: Date updatedAt: Date createdBy: string updatedBy?: string customFields?: Record } export enum InstallationStatus { PENDING = "pending", SCHEDULED = "scheduled", IN_PROGRESS = "in_progress", INSPECTION = "inspection", COMPLETED = "completed", CANCELED = "canceled", ON_HOLD = "on_hold", } export enum Priority { LOW = "low", MEDIUM = "medium", HIGH = "high", URGENT = "urgent", } export interface InstallationFilter { status?: InstallationStatus[] priority?: Priority[] dateRange?: { start: Date end: Date } teamIds?: string[] search?: string systemSizeRange?: { min: number max: number } location?: { city?: string state?: string } } [V0_FILE]typescriptreact:file="modules/installation/types/schedule.ts" export interface Schedule { id: string installationProjectId: string phases: Phase[] estimatedDuration: number // em dias actualDuration?: number // em dias startDate: Date endDate: Date actualStartDate?: Date actualEndDate?: Date status: ScheduleStatus delays?: Delay[] createdAt: Date updatedAt: Date createdBy: string updatedBy?: string } export interface Phase { id: string name: string description?: string order: number estimatedDuration: number // em dias actualDuration?: number // em dias startDate: Date endDate: Date actualStartDate?: Date actualEndDate?: Date status: PhaseStatus dependencies?: string[] // IDs de fases que precisam ser concluídas antes assignedTeamId?: string tasks: PhaseTask[] } export interface PhaseTask { id: string name: string description?: string estimatedHours: number actualHours?: number status: TaskStatus assignedTo?: string[] startDate?: Date endDate?: Date actualStartDate?: Date actualEndDate?: Date dependencies?: string[] // IDs de tarefas que precisam ser concluídas antes } export enum ScheduleStatus { DRAFT = "draft", CONFIRMED = "confirmed", IN_PROGRESS = "in_progress", COMPLETED = "completed", DELAYED = "delayed", CANCELED = "canceled", } export enum PhaseStatus { PENDING = "pending", IN_PROGRESS = "in_progress", COMPLETED = "completed", DELAYED = "delayed", CANCELED = "canceled", } export enum TaskStatus { PENDING = "pending", IN_PROGRESS = "in_progress", COMPLETED = "completed", BLOCKED = "blocked", CANCELED = "canceled", } export interface Delay { id: string phaseId?: string taskId?: string reason: string description?: string impactDays: number reportedAt: Date reportedBy: string status: DelayStatus resolutionPlan?: string resolvedAt?: Date resolvedBy?: string } export enum DelayStatus { REPORTED = "reported", UNDER_REVIEW = "under_review", MITIGATED = "mitigated", RESOLVED = "resolved", UNRESOLVED = "unresolved", } export interface ScheduleFilter { status?: ScheduleStatus[] dateRange?: { start: Date end: Date } teamIds?: string[] hasDelays?: boolean search?: string } [V0_FILE]typescriptreact:file="modules/installation/types/team.ts" export interface Team { id: string name: string type: TeamType leader: TeamMember members: TeamMember[] specialties: Specialty[] availability: Availability[] currentAssignments?: Assignment[] rating?: number status: TeamStatus notes?: string createdAt: Date updatedAt: Date } export interface TeamMember { id: string userId: string name: string role: Role specialties: Specialty[] certifications: Certification[] contactInfo: { email: string phone: string } availability: Availability[] currentAssignments?: Assignment[] status: MemberStatus notes?: string joinedAt: Date } export enum TeamType { INSTALLATION = "installation", ELECTRICAL = "electrical", ROOFING = "roofing", INSPECTION = "inspection", MAINTENANCE = "maintenance", MIXED = "mixed", } export enum Role { TEAM_LEADER = "team_leader", INSTALLER = "installer", ELECTRICIAN = "electrician", ROOFER = "roofer", INSPECTOR = "inspector", HELPER = "helper", APPRENTICE = "apprentice", } export enum Specialty { RESIDENTIAL = "residential", COMMERCIAL = "commercial", INDUSTRIAL = "industrial", GROUND_MOUNT = "ground_mount", ROOF_MOUNT = "roof_mount", CARPORT = "carport", TRACKING_SYSTEM = "tracking_system", BATTERY_STORAGE = "battery_storage", OFF_GRID = "off_grid", GRID_TIE = "grid_tie", } export interface Certification { id: string name: string issuedBy: string issuedDate: Date expirationDate?: Date verificationCode?: string status: "active" | "expired" | "revoked" } export interface Availability { date: Date shifts: Shift[] } export enum Shift { MORNING = "morning", AFTERNOON = "afternoon", EVENING = "evening", FULL_DAY = "full_day", } export interface Assignment { projectId: string projectName: string role: Role startDate: Date endDate: Date status: "scheduled" | "in_progress" | "completed" | "canceled" } export enum TeamStatus { ACTIVE = "active", ON_ASSIGNMENT = "on_assignment", UNAVAILABLE = "unavailable", INACTIVE = "inactive", } export enum MemberStatus { ACTIVE = "active", ON_ASSIGNMENT = "on_assignment", ON_LEAVE = "on_leave", TRAINING = "training", INACTIVE = "inactive", } export interface TeamFilter { type?: TeamType[] specialties?: Specialty[] status?: TeamStatus[] availableOn?: Date memberCount?: { min?: number max?: number } search?: string } [V0_FILE]typescriptreact:file="modules/installation/types/equipment.ts" export interface Equipment { id: string projectId?: string type: EquipmentType category: EquipmentCategory manufacturer: string model: string serialNumber?: string quantity: number status: EquipmentStatus location?: string assignedTo?: string purchaseDate?: Date warrantyExpiration?: Date specifications?: Record notes?: string condition?: EquipmentCondition lastInspection?: Date nextInspection?: Date documents?: EquipmentDocument[] history?: EquipmentHistoryEntry[] createdAt: Date updatedAt: Date } export enum EquipmentType { SOLAR_PANEL = "solar_panel", INVERTER = "inverter", BATTERY = "battery", MOUNTING_SYSTEM = "mounting_system", COMBINER_BOX = "combiner_box", DISCONNECT_SWITCH = "disconnect_switch", METER = "meter", MONITORING_SYSTEM = "monitoring_system", CABLE = "cable", CONNECTOR = "connector", TOOL = "tool", SAFETY_EQUIPMENT = "safety_equipment", OTHER = "other", } export enum EquipmentCategory { INSTALLATION = "installation", REPLACEMENT = "replacement", SPARE = "spare", RENTAL = "rental", COMPANY_OWNED = "company_owned", CUSTOMER_OWNED = "customer_owned", } export enum EquipmentStatus { AVAILABLE = "available", ASSIGNED = "assigned", IN_TRANSIT = "in_transit", INSTALLED = "installed", UNDER_MAINTENANCE = "under_maintenance", DEFECTIVE = "defective", RETIRED = "retired", } export enum EquipmentCondition { NEW = "new", EXCELLENT = "excellent", GOOD = "good", FAIR = "fair", POOR = "poor", DAMAGED = "damaged", UNUSABLE = "unusable", } export interface EquipmentDocument { id: string type: "manual" | "warranty" | "certification" | "receipt" | "inspection" | "other" name: string url: string uploadedAt: Date uploadedBy: string } export interface EquipmentHistoryEntry { id: string date: Date action: "received" | "assigned" | "installed" | "inspected" | "maintained" | "replaced" | "returned" | "retired" description: string performedBy: string location?: string notes?: string } export interface EquipmentFilter { type?: EquipmentType[] category?: EquipmentCategory[] status?: EquipmentStatus[] manufacturer?: string[] condition?: EquipmentCondition[] projectId?: string search?: string } [V0_FILE]typescriptreact:file="modules/installation/types/inspection.ts" isFixed="true" export interface Inspection { id: string projectId: string type: InspectionType status: InspectionStatus scheduledDate: Date actualDate?: Date inspector: { id: string name: string company?: string contactInfo?: { email: string phone: string } isExternal: boolean } location: { address: string city: string state: string zipCode: string } checklists: Checklist[] findings?: Finding[] result?: InspectionResult notes?: string documents?: InspectionDocument[] createdAt: Date updatedAt: Date createdBy: string updatedBy?: string } export enum InspectionType { PRE_INSTALLATION = "pre_installation", ROUGH_IN = "rough_in", FINAL = "final", WARRANTY = "warranty", MAINTENANCE = "maintenance", TROUBLESHOOTING = "troubleshooting", UTILITY = "utility", PERMIT = "permit", } export enum InspectionStatus { SCHEDULED = "scheduled", IN_PROGRESS = "in_progress", COMPLETED = "completed", FAILED = "failed", RESCHEDULED = "rescheduled", CANCELED = "canceled", } export enum InspectionResult { PASSED = "passed", PASSED_WITH_CONDITIONS = "passed_with_conditions", FAILED = "failed", INCOMPLETE = "incomplete", } export interface Finding { id: string category: "safety" | "performance" | "compliance" | "quality" | "other" severity: "critical" | "major" | "minor" | "observation" description: string location?: string recommendedAction: string photos?: string[] isResolved: boolean resolvedAt?: Date resolvedBy?: string resolutionNotes?: string verificationRequired: boolean verifiedAt?: Date verifiedBy?: string } export interface InspectionDocument { id: string type: "report" | "certificate" | "permit" | "photo" | "video" | "other" name: string url: string uploadedAt: Date uploadedBy: string } export interface InspectionFilter { type?: InspectionType[] status?: InspectionStatus[] result?: InspectionResult[] dateRange?: { start: Date end: Date } inspectorId?: string projectId?: string hasUnresolvedFindings?: boolean search?: string } export interface Checklist { id: string name: string items: ChecklistItem[] } export interface ChecklistItem { id: string label: string checked: boolean notes?: string } [V0_FILE]typescriptreact:file="modules/installation/types/checklist.ts" export interface Checklist { id: string name: string description?: string type: ChecklistType category: ChecklistCategory sections: ChecklistSection[] requiredSignatures: RequiredSignature[] signatures?: Signature[] status: ChecklistStatus completedAt?: Date completedBy?: string notes?: string createdAt: Date updatedAt: Date createdBy: string updatedBy?: string version: string } export enum ChecklistType { INSTALLATION = "installation", INSPECTION = "inspection", SAFETY = "safety", QUALITY = "quality", COMMISSIONING = "commissioning", MAINTENANCE = "maintenance", } export enum ChecklistCategory { PRE_INSTALLATION = "pre_installation", MECHANICAL = "mechanical", ELECTRICAL = "electrical", ROOFING = "roofing", SYSTEM_TESTING = "system_testing", FINAL_INSPECTION = "final_inspection", CUSTOMER_HANDOVER = "customer_handover", } export enum ChecklistStatus { NOT_STARTED = "not_started", IN_PROGRESS = "in_progress", COMPLETED = "completed", REQUIRES_ATTENTION = "requires_attention", SKIPPED = "skipped", } export interface ChecklistSection { id: string title: string description?: string order: number items: ChecklistItem[] } export interface ChecklistItem { id: string description: string order: number type: "checkbox" | "text" | "number" | "photo" | "signature" | "select" required: boolean options?: string[] // Para tipo "select" value?: any status: "pending" | "passed" | "failed" | "na" | "skipped" notes?: string photos?: string[] completedAt?: Date completedBy?: string } export interface RequiredSignature { role: "installer" | "inspector" | "supervisor" | "customer" | "utility_rep" | "other" description: string required: boolean } export interface Signature { role: string name: string signature: string date: Date notes?: string } export interface ChecklistFilter { type?: ChecklistType[] category?: ChecklistCategory[] status?: ChecklistStatus[] dateRange?: { start: Date end: Date } projectId?: string search?: string } [V0_FILE]typescriptreact:file="modules/installation/types/document.ts" export interface Document { id: string projectId: string name: string description?: string type: DocumentType category: DocumentCategory url: string fileType: string fileSize: number version: number status: DocumentStatus tags?: string[] metadata?: Record uploadedAt: Date uploadedBy: string updatedAt?: Date updatedBy?: string expiresAt?: Date isPublic: boolean accessRoles?: string[] signatures?: DocumentSignature[] } export enum DocumentType { PERMIT = "permit", CONTRACT = "contract", INVOICE = "invoice", INSPECTION_REPORT = "inspection_report", CHECKLIST = "checklist", MANUAL = "manual", WARRANTY = "warranty", PHOTO = "photo", DIAGRAM = "diagram", CERTIFICATE = "certificate", CONSENT_FORM = "consent_form", OTHER = "other", } export enum DocumentCategory { PRE_INSTALLATION = "pre_installation", INSTALLATION = "installation", POST_INSTALLATION = "post_installation", CUSTOMER = "customer", UTILITY = "utility", FINANCIAL = "financial", TECHNICAL = "technical", LEGAL = "legal", INTERNAL = "internal", } export enum DocumentStatus { DRAFT = "draft", PENDING_APPROVAL = "pending_approval", APPROVED = "approved", REJECTED = "rejected", EXPIRED = "expired", ARCHIVED = "archived", } export interface DocumentSignature { id: string name: string role: string signature: string date: Date verified: boolean verificationMethod?: string } export interface DocumentFilter { type?: DocumentType[] category?: DocumentCategory[] status?: DocumentStatus[] dateRange?: { start: Date end: Date } projectId?: string uploadedBy?: string search?: string tags?: string[] } [V0_FILE]typescriptreact:file="modules/installation/types/notification.ts" export interface Notification { id: string projectId?: string type: NotificationType category: NotificationCategory priority: NotificationPriority title: string message: string recipients: Recipient[] status: NotificationStatus createdAt: Date scheduledAt?: Date sentAt?: Date expiresAt?: Date readBy?: { userId: string readAt: Date }[] actions?: NotificationAction[] metadata?: Record } export enum NotificationType { PROJECT_UPDATE = "project_update", SCHEDULE_CHANGE = "schedule_change", TASK_ASSIGNMENT = "task_assignment", INSPECTION_REMINDER = "inspection_reminder", DOCUMENT_REQUEST = "document_request", EQUIPMENT_ISSUE = "equipment_issue", SAFETY_ALERT = "safety_alert", WEATHER_ALERT = "weather_alert", SYSTEM_NOTIFICATION = "system_notification", } export enum NotificationCategory { INFO = "info", WARNING = "warning", ALERT = "alert", ACTION_REQUIRED = "action_required", SUCCESS = "success", } export enum NotificationPriority { LOW = "low", MEDIUM = "medium", HIGH = "high", URGENT = "urgent", } export interface Recipient { type: "user" | "team" | "role" | "email" id: string deliveryMethod: ("app" | "email" | "sms")[] } export enum NotificationStatus { DRAFT = "draft", SCHEDULED = "scheduled", SENT = "sent", DELIVERED = "delivered", FAILED = "failed", CANCELED = "canceled", } export interface NotificationAction { label: string url: string type: "link" | "button" | "download" } export interface NotificationFilter { type?: NotificationType[] category?: NotificationCategory[] priority?: NotificationPriority[] status?: NotificationStatus[] dateRange?: { start: Date end: Date } projectId?: string recipientId?: string search?: string unreadOnly?: boolean } [V0_FILE]typescriptreact:file="modules/installation/types/task.ts" export interface Task { id: string projectId: string title: string description?: string type: TaskType priority: TaskPriority status: TaskStatus progress: number assignedTo?: { type: "user" | "team" id: string name: string }[] dueDate?: Date startDate?: Date endDate?: Date estimatedHours?: number actualHours?: number dependencies?: string[] subtasks?: Subtask[] attachments?: TaskAttachment[] comments?: TaskComment[] tags?: string[] createdAt: Date updatedAt: Date createdBy: string updatedBy?: string } export enum TaskType { PREPARATION = "preparation", INSTALLATION = "installation", INSPECTION = "inspection", DOCUMENTATION = "documentation", COORDINATION = "coordination", PROCUREMENT = "procurement", CUSTOMER_COMMUNICATION = "customer_communication", UTILITY_COORDINATION = "utility_coordination", TROUBLESHOOTING = "troubleshooting", OTHER = "other", } export enum TaskPriority { LOW = "low", MEDIUM = "medium", HIGH = "high", URGENT = "urgent", } export enum TaskStatus { PENDING = "pending", IN_PROGRESS = "in_progress", COMPLETED = "completed", BLOCKED = "blocked", DEFERRED = "deferred", CANCELED = "canceled", } export interface Subtask { id: string title: string description?: string status: TaskStatus assignedTo?: string dueDate?: Date completedAt?: Date completedBy?: string } export interface TaskAttachment { id: string name: string url: string fileType: string fileSize: number uploadedAt: Date uploadedBy: string } export interface TaskComment { id: string text: string createdAt: Date createdBy: string updatedAt?: Date attachments?: TaskAttachment[] } export interface TaskFilter { type?: TaskType[] priority?: TaskPriority[] status?: TaskStatus[] assignedTo?: string dateRange?: { start: Date end: Date } projectId?: string search?: string tags?: string[] } [V0_FILE]typescriptreact:file="modules/installation/types/progress.ts" export interface Progress { id: string projectId: string overallProgress: number phases: PhaseProgress[] lastUpdated: Date updatedBy: string estimatedCompletion?: Date milestones: Milestone[] dailyReports: DailyReport[] issues?: Issue[] } export interface PhaseProgress { phaseId: string phaseName: string progress: number status: "not_started" | "in_progress" | "completed" | "delayed" startDate?: Date endDate?: Date actualStartDate?: Date actualEndDate?: Date tasks: TaskProgress[] } export interface TaskProgress { taskId: string taskName: string progress: number status: "not_started" | "in_progress" | "completed" | "blocked" notes?: string } export interface Milestone { id: string name: string description?: string dueDate: Date completedDate?: Date status: "pending" | "completed" | "missed" | "rescheduled" notes?: string } export interface DailyReport { id: string date: Date weather: { condition: string temperature: number windSpeed?: number precipitation?: number } workHours: { start: string end: string totalHours: number } crewPresent: { teamId: string teamName: string memberCount: number members?: { id: string name: string role: string hoursWorked: number }[] }[] workCompleted: { description: string quantity?: number unit?: string photos?: string[] }[] materialsUsed: { name: string quantity: number unit: string }[] equipmentUsed: { name: string hours?: number }[] delays?: { reason: string hours: number impact: string }[] safetyIncidents?: { description: string severity: "minor" | "moderate" | "serious" | "critical" actionTaken: string }[] qualityIssues?: { description: string resolution: string }[] notes?: string nextDayPlan?: string submittedBy: string submittedAt: Date approvedBy?: string approvedAt?: Date status: "draft" | "submitted" | "approved" | "rejected" } export interface Issue { id: string title: string description: string type: "technical" | "logistical" | "safety" | "quality" | "customer" | "weather" | "other" severity: "low" | "medium" | "high" | "critical" status: "open" | "in_progress" | "resolved" | "closed" reportedAt: Date reportedBy: string assignedTo?: string dueDate?: Date resolvedAt?: Date resolvedBy?: string resolution?: string impact: { schedule?: number // dias de atraso cost?: number // custo adicional quality?: "none" | "minor" | "moderate" | "significant" } photos?: string[] relatedTasks?: string[] } export interface ProgressFilter { projectId?: string dateRange?: { start: Date end: Date } progressRange?: { min: number max: number } hasIssues?: boolean search?: string } [V0_FILE]typescriptreact:file="modules/installation/services/installation-project-service.ts" import type { InstallationProject, InstallationFilter, InstallationStatus, Priority, } from "../types/installation-project" export class InstallationProjectService { async getProjects(filter?: InstallationFilter): Promise { // Implementation would fetch installation projects from API with optional filtering return [] } async getProjectById(id: string): Promise { // Implementation would fetch a specific installation project by ID return null } async createProject( project: Omit, ): Promise { // Implementation would create a new installation project return {} as InstallationProject } async updateProject(id: string, project: Partial): Promise { // Implementation would update an existing installation project return {} as InstallationProject } async deleteProject(id: string): Promise { // Implementation would delete an installation project return true } async changeProjectStatus(id: string, status: InstallationStatus): Promise { // Implementation would update just the status of an installation project return {} as InstallationProject } async changeProjectPriority(id: string, priority: Priority): Promise { // Implementation would update just the priority of an installation project return {} as InstallationProject } async assignTeam(id: string, teamId: string): Promise { // Implementation would assign a team to an installation project return {} as InstallationProject } async getProjectSummary(id: string): Promise<{ project: InstallationProject progress: number daysRemaining: number teamMembers: number openIssues: number upcomingMilestones: any[] recentActivities: any[] }> { // Implementation would get a summary of the installation project return { project: {} as InstallationProject, progress: 0, daysRemaining: 0, teamMembers: 0, openIssues: 0, upcomingMilestones: [], recentActivities: [], } } async getProjectTimeline(id: string): Promise<{ phases: any[] milestones: any[] criticalPath: any[] delays: any[] }> { // Implementation would get the timeline of the installation project return { phases: [], milestones: [], criticalPath: [], delays: [], } } async getProjectsByCustomer(customerId: string): Promise { // Implementation would fetch installation projects for a specific customer return [] } async getProjectsByTeam(teamId: string): Promise { // Implementation would fetch installation projects assigned to a specific team return [] } async getProjectStatistics(): Promise<{ totalProjects: number byStatus: Record byPriority: Record averageDuration: number completedOnTime: number completedLate: number }> { // Implementation would calculate statistics for all installation projects return { totalProjects: 0, byStatus: {} as Record, byPriority: {} as Record, averageDuration: 0, completedOnTime: 0, completedLate: 0, } } } [V0_FILE]typescriptreact:file="modules/installation/services/schedule-service.ts" import type { Schedule, ScheduleFilter, ScheduleStatus, Phase, PhaseTask, Delay } from "../types/schedule" export class ScheduleService { async getSchedules(filter?: ScheduleFilter): Promise { // Implementation would fetch schedules from API with optional filtering return [] } async getScheduleById(id: string): Promise { // Implementation would fetch a specific schedule by ID return null } async getScheduleByProjectId(projectId: string): Promise { // Implementation would fetch a schedule for a specific project return null } async createSchedule(schedule: Omit): Promise { // Implementation would create a new schedule return {} as Schedule } async updateSchedule(id: string, schedule: Partial): Promise { // Implementation would update an existing schedule return {} as Schedule } async deleteSchedule(id: string): Promise { // Implementation would delete a schedule return true } async changeScheduleStatus(id: string, status: ScheduleStatus): Promise { // Implementation would update just the status of a schedule return {} as Schedule } async addPhase(scheduleId: string, phase: Omit): Promise { // Implementation would add a phase to a schedule return {} as Phase } async updatePhase(scheduleId: string, phaseId: string, phase: Partial): Promise { // Implementation would update a phase in a schedule return {} as Phase } async deletePhase(scheduleId: string, phaseId: string): Promise { // Implementation would delete a phase from a schedule return true } async addTask(scheduleId: string, phaseId: string, task: Omit): Promise { // Implementation would add a task to a phase return {} as PhaseTask } async updateTask(scheduleId: string, phaseId: string, taskId: string, task: Partial): Promise { // Implementation would update a task in a phase return {} as PhaseTask } async deleteTask(scheduleId: string, phaseId: string, taskId: string): Promise { // Implementation would delete a task from a phase return true } async reportDelay(scheduleId: string, delay: Omit): Promise { // Implementation would report a delay for a schedule return {} as Delay } async updateDelay(scheduleId: string, delayId: string, delay: Partial): Promise { // Implementation would update a delay for a schedule return {} as Delay } async resolveDelay(scheduleId: string, delayId: string, resolution: string): Promise { // Implementation would resolve a delay for a schedule return {} as Delay } async getScheduleConflicts( teamId: string, dateRange: { start: Date; end: Date }, ): Promise<{ conflicts: { date: Date projects: { id: string; name: string }[] }[] }> { // Implementation would check for scheduling conflicts for a team return { conflicts: [] } } async optimizeSchedule(scheduleId: string): Promise { // Implementation would optimize a schedule based on team availability and dependencies return {} as Schedule } async getScheduleCalendar(filter: { teamIds?: string[]; dateRange: { start: Date; end: Date } }): Promise<{ events: { id: string title: string start: Date end: Date projectId: string teamId?: string phaseId?: string taskId?: string status: string type: "phase" | "task" | "milestone" }[] }> { // Implementation would get calendar events for schedules return { events: [] } } } [V0_FILE]typescriptreact:file="modules/installation/services/team-service.ts" import type { Team, TeamFilter, TeamType, TeamMember, Role, Specialty, TeamStatus, MemberStatus } from "../types/team" export class TeamService { async getTeams(filter?: TeamFilter): Promise { // Implementation would fetch teams from API with optional filtering return [] } async getTeamById(id: string): Promise { // Implementation would fetch a specific team by ID return null } async createTeam(team: Omit): Promise { // Implementation would create a new team return {} as Team } async updateTeam(id: string, team: Partial): Promise { // Implementation would update an existing team return {} as Team } async deleteTeam(id: string): Promise { // Implementation would delete a team return true } async changeTeamStatus(id: string, status: TeamStatus): Promise { // Implementation would update just the status of a team return {} as Team } async addTeamMember(teamId: string, member: Omit): Promise { // Implementation would add a member to a team return {} as TeamMember } async updateTeamMember(teamId: string, memberId: string, member: Partial): Promise { // Implementation would update a team member return {} as TeamMember } async removeTeamMember(teamId: string, memberId: string): Promise { // Implementation would remove a member from a team return true } async changeTeamMemberStatus(teamId: string, memberId: string, status: MemberStatus): Promise { // Implementation would update just the status of a team member return {} as TeamMember } async getTeamAvailability( teamId: string, dateRange: { start: Date; end: Date }, ): Promise<{ availableDates: Date[] partiallyAvailableDates: { date: Date availableMembers: number totalMembers: number }[] unavailableDates: Date[] }> { // Implementation would get the availability of a team for a date range return { availableDates: [], partiallyAvailableDates: [], unavailableDates: [], } } async updateTeamAvailability( teamId: string, availability: { date: Date; shifts: ("morning" | "afternoon" | "evening" | "full_day")[] }[], ): Promise { // Implementation would update the availability of a team return {} as Team } async assignTeamToProject( teamId: string, projectId: string, assignment: { startDate: Date; endDate: Date; role: Role }, ): Promise { // Implementation would assign a team to a project return {} as Team } async getTeamsBySpecialty(specialty: Specialty): Promise { // Implementation would fetch teams with a specific specialty return [] } async getTeamsByType(type: TeamType): Promise { // Implementation would fetch teams of a specific type return [] } async getTeamPerformance( teamId: string, dateRange: { start: Date; end: Date }, ): Promise<{ projectsCompleted: number onTimeCompletion: number averageProjectDuration: number customerSatisfaction: number qualityScore: number safetyIncidents: number }> { // Implementation would get performance metrics for a team return { projectsCompleted: 0, onTimeCompletion: 0, averageProjectDuration: 0, customerSatisfaction: 0, qualityScore: 0, safetyIncidents: 0, } } async getTeamWorkload( teamId: string, dateRange: { start: Date; end: Date }, ): Promise<{ totalProjects: number currentProjects: number upcomingProjects: number utilizationRate: number workloadByDay: { date: Date; hours: number }[] }> { // Implementation would get the workload of a team return { totalProjects: 0, currentProjects: 0, upcomingProjects: 0, utilizationRate: 0, workloadByDay: [], } } } [V0_FILE]typescriptreact:file="modules/installation/hooks/use-installation-projects.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { InstallationProject, InstallationFilter, InstallationStatus, Priority, } from "../types/installation-project" import { InstallationProjectService } from "../services/installation-project-service" export function useInstallationProjects(initialFilter?: InstallationFilter) { const [projects, setProjects] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [filter, setFilter] = useState(initialFilter) const projectService = new InstallationProjectService() const fetchProjects = useCallback(async () => { setLoading(true) setError(null) try { const data = await projectService.getProjects(filter) setProjects(data) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch installation projects") } finally { setLoading(false) } }, [filter]) useEffect(() => { fetchProjects() }, [fetchProjects]) const createProject = async (project: Omit) => { setLoading(true) setError(null) try { const newProject = await projectService.createProject(project) setProjects((prev) => [...prev, newProject]) return newProject } catch (err) { setError(err instanceof Error ? err.message : "Failed to create installation project") throw err } finally { setLoading(false) } } const updateProject = async (id: string, project: Partial) => { setLoading(true) setError(null) try { const updatedProject = await projectService.updateProject(id, project) setProjects((prev) => prev.map((p) => (p.id === id ? updatedProject : p))) return updatedProject } catch (err) { setError(err instanceof Error ? err.message : "Failed to update installation project") throw err } finally { setLoading(false) } } const deleteProject = async (id: string) => { setLoading(true) setError(null) try { const success = await projectService.deleteProject(id) if (success) { setProjects((prev) => prev.filter((p) => p.id !== id)) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to delete installation project") throw err } finally { setLoading(false) } } const changeProjectStatus = async (id: string, status: InstallationStatus) => { setLoading(true) setError(null) try { const updatedProject = await projectService.changeProjectStatus(id, status) setProjects((prev) => prev.map((p) => (p.id === id ? updatedProject : p))) return updatedProject } catch (err) { setError(err instanceof Error ? err.message : "Failed to change installation project status") throw err } finally { setLoading(false) } } const changeProjectPriority = async (id: string, priority: Priority) => { setLoading(true) setError(null) try { const updatedProject = await projectService.changeProjectPriority(id, priority) setProjects((prev) => prev.map((p) => (p.id === id ? updatedProject : p))) return updatedProject } catch (err) { setError(err instanceof Error ? err.message : "Failed to change installation project priority") throw err } finally { setLoading(false) } } const assignTeam = async (id: string, teamId: string) => { setLoading(true) setError(null) try { const updatedProject = await projectService.assignTeam(id, teamId) setProjects((prev) => prev.map((p) => (p.id === id ? updatedProject : p))) return updatedProject } catch (err) { setError(err instanceof Error ? err.message : "Failed to assign team to installation project") throw err } finally { setLoading(false) } } return { projects, loading, error, filter, setFilter, fetchProjects, createProject, updateProject, deleteProject, changeProjectStatus, changeProjectPriority, assignTeam, } } [V0_FILE]typescriptreact:file="modules/installation/hooks/use-teams.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { Team, TeamFilter, TeamStatus, TeamMember, MemberStatus } from "../types/team" import { TeamService } from "../services/team-service" export function useTeams(initialFilter?: TeamFilter) { const [teams, setTeams] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [filter, setFilter] = useState(initialFilter) const teamService = new TeamService() const fetchTeams = useCallback(async () => { setLoading(true) setError(null) try { const data = await teamService.getTeams(filter) setTeams(data) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch teams") } finally { setLoading(false) } }, [filter]) useEffect(() => { fetchTeams() }, [fetchTeams]) const createTeam = async (team: Omit) => { setLoading(true) setError(null) try { const newTeam = await teamService.createTeam(team) setTeams((prev) => [...prev, newTeam]) return newTeam } catch (err) { setError(err instanceof Error ? err.message : "Failed to create team") throw err } finally { setLoading(false) } } const updateTeam = async (id: string, team: Partial) => { setLoading(true) setError(null) try { const updatedTeam = await teamService.updateTeam(id, team) setTeams((prev) => prev.map((t) => (t.id === id ? updatedTeam : t))) return updatedTeam } catch (err) { setError(err instanceof Error ? err.message : "Failed to update team") throw err } finally { setLoading(false) } } const deleteTeam = async (id: string) => { setLoading(true) setError(null) try { const success = await teamService.deleteTeam(id) if (success) { setTeams((prev) => prev.filter((t) => t.id !== id)) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to delete team") throw err } finally { setLoading(false) } } const changeTeamStatus = async (id: string, status: TeamStatus) => { setLoading(true) setError(null) try { const updatedTeam = await teamService.changeTeamStatus(id, status) setTeams((prev) => prev.map((t) => (t.id === id ? updatedTeam : t))) return updatedTeam } catch (err) { setError(err instanceof Error ? err.message : "Failed to change team status") throw err } finally { setLoading(false) } } const addTeamMember = async (teamId: string, member: Omit) => { setLoading(true) setError(null) try { const newMember = await teamService.addTeamMember(teamId, member) setTeams((prev) => prev.map((t) => (t.id === teamId ? { ...t, members: [...t.members, newMember] } : t))) return newMember } catch (err) { setError(err instanceof Error ? err.message : "Failed to add team member") throw err } finally { setLoading(false) } } const updateTeamMember = async (teamId: string, memberId: string, member: Partial) => { setLoading(true) setError(null) try { const updatedMember = await teamService.updateTeamMember(teamId, memberId, member) setTeams((prev) => prev.map((t) => t.id === teamId ? { ...t, members: t.members.map((m) => (m.id === memberId ? updatedMember : m)), } : t, ), ) return updatedMember } catch (err) { setError(err instanceof Error ? err.message : "Failed to update team member") throw err } finally { setLoading(false) } } const removeTeamMember = async (teamId: string, memberId: string) => { setLoading(true) setError(null) try { const success = await teamService.removeTeamMember(teamId, memberId) if (success) { setTeams((prev) => prev.map((t) => t.id === teamId ? { ...t, members: t.members.filter((m) => m.id !== memberId), } : t, ), ) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to remove team member") throw err } finally { setLoading(false) } } const changeTeamMemberStatus = async (teamId: string, memberId: string, status: MemberStatus) => { setLoading(true) setError(null) try { const updatedMember = await teamService.changeTeamMemberStatus(teamId, memberId, status) setTeams((prev) => prev.map((t) => t.id === teamId ? { ...t, members: t.members.map((m) => (m.id === memberId ? updatedMember : m)), } : t, ), ) return updatedMember } catch (err) { setError(err instanceof Error ? err.message : "Failed to change team member status") throw err } finally { setLoading(false) } } return { teams, loading, error, filter, setFilter, fetchTeams, createTeam, updateTeam, deleteTeam, changeTeamStatus, addTeamMember, updateTeamMember, removeTeamMember, changeTeamMemberStatus, } } [V0_FILE]typescriptreact:file="modules/installation/components/index.ts" export * from "./projects" export * from "./schedule" export * from "./teams" export * from "./equipment" export * from "./inspections" export * from "./checklists" export * from "./documents" export * from "./notifications" export * from "./tasks" export * from "./progress" export * from "./dashboard" [V0_FILE]typescriptreact:file="modules/installation/components/projects/index.ts" export * from "./project-list" export * from "./project-form" export * from "./project-detail" export * from "./project-filter" export * from "./project-summary" export * from "./project-timeline" export * from "./project-assignment" export * from "./project-status-update" [V0_FILE]typescriptreact:file="modules/installation/components/projects/project-list.tsx" "use client" import { useState } from "react" import { useInstallationProjects } from "../../hooks/use-installation-projects" import { type InstallationProject, InstallationStatus, Priority } from "../../types/installation-project" import { formatDate } from "../../utils/date-utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, Edit, Trash, Users, ExternalLink, MapPin, Calendar } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { ProjectFilter } from "./project-filter" interface ProjectListProps { onEdit?: (project: InstallationProject) => void onDelete?: (project: InstallationProject) => void onView?: (project: InstallationProject) => void onAssign?: (project: InstallationProject) => void } export function ProjectList({ onEdit, onDelete, onView, onAssign }: ProjectListProps) { const { projects, loading, error, filter, setFilter, changeProjectStatus } = useInstallationProjects() const [selectedProjects, setSelectedProjects] = useState([]) const getStatusBadgeColor = (status: InstallationStatus) => { switch (status) { case InstallationStatus.PENDING: return "bg-yellow-500" case InstallationStatus.SCHEDULED: return "bg-blue-500" case InstallationStatus.IN_PROGRESS: return "bg-green-500" case InstallationStatus.INSPECTION: return "bg-purple-500" case InstallationStatus.COMPLETED: return "bg-teal-500" case InstallationStatus.CANCELED: return "bg-red-500" case InstallationStatus.ON_HOLD: return "bg-gray-500" default: return "bg-gray-500" } } const getPriorityBadgeColor = (priority: Priority) => { switch (priority) { case Priority.LOW: return "bg-blue-500" case Priority.MEDIUM: return "bg-yellow-500" case Priority.HIGH: return "bg-orange-500" case Priority.URGENT: return "bg-red-500" default: return "bg-gray-500" } } const handleStatusChange = async (projectId: string, status: InstallationStatus) => { try { await changeProjectStatus(projectId, status) } catch (error) { console.error("Failed to change project status:", error) } } const toggleSelectProject = (projectId: string) => { setSelectedProjects((prev) => prev.includes(projectId) ? prev.filter((id) => id !== projectId) : [...prev, projectId], ) } const selectAllProjects = () => { if (selectedProjects.length === projects.length) { setSelectedProjects([]) } else { setSelectedProjects(projects.map((project) => project.id)) } } if (error) { return

Error: {error}

} return ( Projetos de Instalação

0} onChange={selectAllProjects} className="h-4 w-4 rounded border-gray-300" /> Projeto Local Tamanho Status Prioridade Datas Equipe Ações {loading ? ( Carregando... ) : projects.length === 0 ? ( Nenhum projeto encontrado ) : ( projects.map((project) => ( toggleSelectProject(project.id)} className="h-4 w-4 rounded border-gray-300" /> {project.title}

{project.location.city}, {project.location.state}

{project.systemSize} kWp {project.status} {project.priority}

Início: {project.startDate ? formatDate(project.startDate) : "N/A"}

Fim: {project.endDate ? formatDate(project.endDate) : "N/A"}

{project.teams && project.teams.length > 0 ? (

{project.teams[0].name}

) : ( Não atribuído )} Ações onView?.(project)}> Visualizar onEdit?.(project)}> Editar onAssign?.(project)}> Atribuir Equipe Alterar Status {Object.values(InstallationStatus).map((status) => ( handleStatusChange(project.id, status)} disabled={project.status === status} > {status} Marcar como {status} ))} onDelete?.(project)} className="text-red-600"> Excluir )) )}

) } [V0_FILE]typescriptreact:file="modules/installation/components/teams/index.ts" export * from "./team-list" export * from "./team-form" export * from "./team-detail" export * from "./team-filter" export * from "./team-member-form" export * from "./team-availability" export * from "./team-assignment" export * from "./team-performance" [V0_FILE]typescriptreact:file="modules/installation/components/teams/team-list.tsx" "use client" import { useState } from "react" import { useTeams } from "../../hooks/use-teams" import { type Team, TeamStatus, TeamType } from "../../types/team" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, Edit, Trash, Users, ExternalLink, Calendar, Star } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { TeamFilter } from "./team-filter" interface TeamListProps { onEdit?: (team: Team) => void onDelete?: (team: Team) => void onView?: (team: Team) => void onManageMembers?: (team: Team) => void onManageAvailability?: (team: Team) => void } export function TeamList({ onEdit, onDelete, onView, onManageMembers, onManageAvailability }: TeamListProps) { const { teams, loading, error, filter, setFilter, changeTeamStatus } = useTeams() const [selectedTeams, setSelectedTeams] = useState([]) const getStatusBadgeColor = (status: TeamStatus) => { switch (status) { case TeamStatus.ACTIVE: return "bg-green-500" case TeamStatus.ON_ASSIGNMENT: return "bg-blue-500" case TeamStatus.UNAVAILABLE: return "bg-yellow-500" case TeamStatus.INACTIVE: return "bg-gray-500" default: return "bg-gray-500" } } const getTeamTypeBadgeColor = (type: TeamType) => { switch (type) { case TeamType.INSTALLATION: return "bg-blue-500" case TeamType.ELECTRICAL: return "bg-yellow-500" case TeamType.ROOFING: return "bg-orange-500" case TeamType.INSPECTION: return "bg-purple-500" case TeamType.MAINTENANCE: return "bg-teal-500" case TeamType.MIXED: return "bg-gray-500" default: return "bg-gray-500" } } const handleStatusChange = async (teamId: string, status: TeamStatus) => { try { await changeTeamStatus(teamId, status) } catch (error) { console.error("Failed to change team status:", error) } } const toggleSelectTeam = (teamId: string) => { setSelectedTeams((prev) => (prev.includes(teamId) ? prev.filter((id) => id !== teamId) : [...prev, teamId])) } const selectAllTeams = () => { if (selectedTeams.length === teams.length) { setSelectedTeams([]) } else { setSelectedTeams(teams.map((team) => team.id)) } } if (error) { return

Error: {error}

} return ( Equipes

0} onChange={selectAllTeams} className="h-4 w-4 rounded border-gray-300" /> Nome Tipo Líder Membros Especialidades Status Avaliação Ações {loading ? ( Carregando... ) : teams.length === 0 ? ( Nenhuma equipe encontrada ) : ( teams.map((team) => ( toggleSelectTeam(team.id)} className="h-4 w-4 rounded border-gray-300" /> {team.name} {team.type} {team.leader.name}

{team.members.length}

{team.specialties.slice(0, 2).map((specialty) => ( {specialty} ))} {team.specialties.length > 2 && ( +{team.specialties.length - 2} )}

{team.status}

{team.rating || "N/A"}

Ações onView?.(team)}> Visualizar onEdit?.(team)}> Editar onManageMembers?.(team)}> Gerenciar Membros onManageAvailability?.(team)}> Gerenciar Disponibilidade Alterar Status {Object.values(TeamStatus).map((status) => ( handleStatusChange(team.id, status)} disabled={team.status === status} > {status} Marcar como {status} ))} onDelete?.(team)} className="text-red-600"> Excluir )) )}

) } [V0_FILE]typescriptreact:file="modules/installation/components/dashboard/index.ts" export * from "./installation-dashboard" export * from "./project-status-chart" export * from "./team-workload" export * from "./upcoming-inspections" export * from "./equipment-inventory" export * from "./recent-activities" export * from "./project-progress" export * from "./schedule-calendar" [V0_FILE]typescriptreact:file="modules/installation/components/dashboard/installation-dashboard.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart, PieChart, Activity, Calendar, Users, CheckSquare, Clock, TrendingUp, TrendingDown, } from "lucide-react" export function InstallationDashboard() { const [period, setPeriod] = useState<"day" | "week" | "month" | "quarter" | "year">("month") // This would come from a real data source const dashboardData = { totalProjects: 48, projectsGrowth: 12.5, activeProjects: 32, activeProjectsGrowth: 8.3, completedProjects: 16, completedProjectsGrowth: 15.2, onTimeCompletion: 85, onTimeCompletionGrowth: 3.1, teamUtilization: 78, teamUtilizationGrowth: 4.2, openIssues: 12, openIssuesGrowth: -2.3, upcomingInspections: 8, upcomingInspectionsGrowth: -5.1, projectsByStatus: [ { status: "Pendente", count: 5, percentage: 10.4 }, { status: "Agendado", count: 12, percentage: 25.0 }, { status: "Em Progresso", count: 15, percentage: 31.3 }, { status: "Inspeção", count: 8, percentage: 16.7 }, { status: "Concluído", count: 6, percentage: 12.5 }, { status: "Cancelado", count: 1, percentage: 2.1 }, { status: "Em Espera", count: 1, percentage: 2.1 }, ], topTeams: [ { id: "1", name: "Equipe Alpha", completedProjects: 8, rating: 4.8 }, { id: "2", name: "Equipe Beta", completedProjects: 6, rating: 4.7 }, { id: "3", name: "Equipe Gamma", completedProjects: 5, rating: 4.5 }, ], upcomingProjects: [ { id: "1", title: "Instalação Residencial Solar Ville", startDate: new Date(2023, 10, 15), team: "Equipe Alpha", systemSize: 8.5, }, { id: "2", title: "Instalação Comercial Têxtil Nacional", startDate: new Date(2023, 10, 22), team: "Equipe Beta", systemSize: 25.2, }, { id: "3", title: "Instalação Residencial Bom Preço", startDate: new Date(2023, 10, 28), team: "Equipe Gamma", systemSize: 12.8, }, ], recentIssues: [ { id: "1", title: "Atraso na entrega de equipamentos", project: "Instalação Comercial Têxtil Nacional", severity: "Alta", reportedAt: new Date(2023, 10, 5), }, { id: "2", title: "Problema de compatibilidade de inversor", project: "Instalação Residencial Solar Ville", severity: "Média", reportedAt: new Date(2023, 10, 8), }, { id: "3", title: "Condições climáticas desfavoráveis", project: "Instalação Residencial Bom Preço", severity: "Baixa", reportedAt: new Date(2023, 10, 10), }, ], } return (

Dashboard de Instalação

Total de Projetos

{dashboardData.totalProjects}

= 0 ? "bg-green-100" : "bg-red-100"}`}> = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.projectsGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`}> {dashboardData.projectsGrowth}% em relação ao último {period}

Projetos Ativos

{dashboardData.activeProjects}

= 0 ? "bg-green-100" : "bg-red-100"}`} > = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.activeProjectsGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`} > {dashboardData.activeProjectsGrowth}% em relação ao último {period}

Conclusão no Prazo

{dashboardData.onTimeCompletion}%

= 0 ? "bg-green-100" : "bg-red-100"}`} > = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.onTimeCompletionGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`} > {dashboardData.onTimeCompletionGrowth}% em relação ao último {period}

Utilização de Equipes

{dashboardData.teamUtilization}%

= 0 ? "bg-green-100" : "bg-red-100"}`} > = 0 ? "text-green-600" : "text-red-600"}`} />

{dashboardData.teamUtilizationGrowth >= 0 ? ( ) : ( )} = 0 ? "text-green-600" : "text-red-600"}`} > {dashboardData.teamUtilizationGrowth}% em relação ao último {period}

Projetos por Status

Gráfico de status de projetos seria renderizado aqui

Progresso de Projetos

Gráfico de progresso de projetos seria renderizado aqui

Melhores Equipes

{dashboardData.topTeams.map((team, index) => (

{index + 1}

{team.name}

{team.completedProjects} projetos

Avaliação: {team.rating}

))}

Próximos Projetos

{dashboardData.upcomingProjects.map((project) => (

{project.title}

{project.systemSize} kWp

{project.team}

{project.startDate.toLocaleDateString()}

))}

Problemas Recentes

{dashboardData.recentIssues.map((issue) => (

{issue.title}

{issue.severity}

{issue.project}

{issue.reportedAt.toLocaleDateString()}

))}

) } [V0_FILE]typescriptreact:file="modules/installation/contexts/index.ts" export * from "./installation-context" export * from "./project-context" export * from "./team-context" export * from "./schedule-context" export * from "./equipment-context" export * from "./inspection-context" [V0_FILE]typescriptreact:file="modules/installation/constants/index.ts" export * from "./project-constants" export * from "./schedule-constants" export * from "./team-constants" export * from "./equipment-constants" export * from "./inspection-constants" export * from "./checklist-constants" export * from "./document-constants" export * from "./notification-constants" export * from "./task-constants" [V0_FILE]typescriptreact:file="modules/installation/constants/project-constants.ts" import { InstallationStatus, Priority } from "../types/installation-project" export const PROJECT_STATUS_LABELS: Record = { [InstallationStatus.PENDING]: "Pendente", [InstallationStatus.SCHEDULED]: "Agendado", [InstallationStatus.IN_PROGRESS]: "Em Progresso", [InstallationStatus.INSPECTION]: "Inspeção", [InstallationStatus.COMPLETED]: "Concluído", [InstallationStatus.CANCELED]: "Cancelado", [InstallationStatus.ON_HOLD]: "Em Espera", } export const PROJECT_STATUS_DESCRIPTIONS: Record = { [InstallationStatus.PENDING]: "Projeto criado, mas ainda não agendado", [InstallationStatus.SCHEDULED]: "Projeto agendado com equipe atribuída", [InstallationStatus.IN_PROGRESS]: "Instalação em andamento", [InstallationStatus.INSPECTION]: "Aguardando inspeção ou em fase de inspeção", [InstallationStatus.COMPLETED]: "Instalação concluída e aprovada", [InstallationStatus.CANCELED]: "Projeto cancelado", [InstallationStatus.ON_HOLD]: "Projeto temporariamente suspenso", } export const PRIORITY_LABELS: Record = { [Priority.LOW]: "Baixa", [Priority.MEDIUM]: "Média", [Priority.HIGH]: "Alta", [Priority.URGENT]: "Urgente", } export const PRIORITY_DESCRIPTIONS: Record = { [Priority.LOW]: "Pode ser agendado com flexibilidade", [Priority.MEDIUM]: "Deve ser agendado dentro do prazo normal", [Priority.HIGH]: "Deve ser priorizado no agendamento", [Priority.URGENT]: "Requer atenção imediata e prioridade máxima", } export const DEFAULT_PROJECT_FIELDS = [ "title", "description", "status", "priority", "startDate", "endDate", "location", "systemSize", "panelCount", "inverterCount", ] export const CUSTOM_PROJECT_FIELDS = [ "roofType", "roofAngle", "roofAzimuth", "connectionType", "utilityProvider", "permitNumber", "specialRequirements", ] export const PROJECT_IMPORT_TEMPLATE_URL = "/templates/installation-project-import-template.csv" export const PROJECT_WORKFLOW_STEPS = [ "Criação do Projeto", "Agendamento", "Atribuição de Equipe", "Preparação de Equipamentos", "Instalação", "Inspeção", "Comissionamento", "Entrega ao Cliente", ] [V0_FILE]typescriptreact:file="modules/installation/constants/team-constants.ts" import { TeamType, Role, Specialty, TeamStatus, MemberStatus } from "../types/team" export const TEAM_TYPE_LABELS: Record = { [TeamType.INSTALLATION]: "Instalação", [TeamType.ELECTRICAL]: "Elétrica", [TeamType.ROOFING]: "Telhado", [TeamType.INSPECTION]: "Inspeção", [TeamType.MAINTENANCE]: "Manutenção", [TeamType.MIXED]: "Mista", } export const ROLE_LABELS: Record = { [Role.TEAM_LEADER]: "Líder de Equipe", [Role.INSTALLER]: "Instalador", [Role.ELECTRICIAN]: "Eletricista", [Role.ROOFER]: "Telhador", [Role.INSPECTOR]: "Inspetor", [Role.HELPER]: "Auxiliar", [Role.APPRENTICE]: "Aprendiz", } export const SPECIALTY_LABELS: Record = { [Specialty.RESIDENTIAL]: "Residencial", [Specialty.COMMERCIAL]: "Comercial", [Specialty.INDUSTRIAL]: "Industrial", [Specialty.GROUND_MOUNT]: "Montagem no Solo", [Specialty.ROOF_MOUNT]: "Montagem em Telhado", [Specialty.CARPORT]: "Carport", [Specialty.TRACKING_SYSTEM]: "Sistema de Rastreamento", [Specialty.BATTERY_STORAGE]: "Armazenamento em Bateria", [Specialty.OFF_GRID]: "Off-Grid", [Specialty.GRID_TIE]: "Grid-Tie", } export const TEAM_STATUS_LABELS: Record = { [TeamStatus.ACTIVE]: "Ativo", [TeamStatus.ON_ASSIGNMENT]: "Em Atribuição", [TeamStatus.UNAVAILABLE]: "Indisponível", [TeamStatus.INACTIVE]: "Inativo", } export const MEMBER_STATUS_LABELS: Record = { [MemberStatus.ACTIVE]: "Ativo", [MemberStatus.ON_ASSIGNMENT]: "Em Atribuição", [MemberStatus.ON_LEAVE]: "Em Licença", [MemberStatus.TRAINING]: "Em Treinamento", [MemberStatus.INACTIVE]: "Inativo", } export const REQUIRED_CERTIFICATIONS = [ "NR10", "NR35", "Instalação Fotovoltaica", "Segurança em Eletricidade", "Trabalho em Altura", ] export const SHIFT_HOURS = { MORNING: { start: "08:00", end: "12:00" }, AFTERNOON: { start: "13:00", end: "17:00" }, EVENING: { start: "17:00", end: "21:00" }, FULL_DAY: { start: "08:00", end: "17:00" }, } export const TEAM_PERFORMANCE_METRICS = [ "Projetos Concluídos", "Taxa de Conclusão no Prazo", "Duração Média do Projeto", "Satisfação do Cliente", "Pontuação de Qualidade", "Incidentes de Segurança", ] [V0_FILE]typescriptreact:file="app/installation/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { InstallationDashboard } from "@/modules/installation/components/dashboard/installation-dashboard" export default function InstallationPage() { return (

) } [V0_FILE]typescriptreact:file="app/installation/projects/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { ProjectList } from "@/modules/installation/components/projects/project-list" export default function ProjectsPage() { return (

Projetos de Instalação

) } [V0_FILE]typescriptreact:file="app/installation/teams/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { TeamList } from "@/modules/installation/components/teams/team-list" export default function TeamsPage() { return (

Equipes

) } [V0_FILE]typescriptreact:file="app/installation/schedule/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { ScheduleCalendar } from "@/modules/installation/components/dashboard/schedule-calendar" export default function SchedulePage() { return (

Agenda de Instalações

) } [V0_FILE]typescriptreact:file="app/installation/equipment/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { EquipmentInventory } from "@/modules/installation/components/dashboard/equipment-inventory" export default function EquipmentPage() { return (

Inventário de Equipamentos

) } [V0_FILE]typescriptreact:file="app/installation/inspections/page.tsx" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" import { UpcomingInspections } from "@/modules/installation/components/dashboard/upcoming-inspections" export default function InspectionsPage() { return (

Inspeções

) } [V0_FILE]typescriptreact:file="app/installation/layout.tsx" import type React from "react" import { InstallationProvider } from "@/modules/installation/contexts/installation-context" export default function InstallationLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/api/installation/projects/route.ts" import { type NextRequest, NextResponse } from "next/server" import { InstallationProjectService } from "@/modules/installation/services/installation-project-service" const projectService = new InstallationProjectService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const status = searchParams.getAll("status") const priority = searchParams.getAll("priority") const teamIds = searchParams.getAll("teamIds") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") const minSize = searchParams.get("minSize") const maxSize = searchParams.get("maxSize") const city = searchParams.get("city") const state = searchParams.get("state") // Build filter object const filter: any = {} if (status.length > 0) filter.status = status if (priority.length > 0) filter.priority = priority if (teamIds.length > 0) filter.teamIds = teamIds if (search) filter.search = search if (city || state) { filter.location = {} if (city) filter.location.city = city if (state) filter.location.state = state } if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } if (minSize && maxSize) { filter.systemSizeRange = { min: Number(minSize), max: Number(maxSize), } } const projects = await projectService.getProjects(filter) return NextResponse.json(projects) } catch (error) { console.error("Error fetching installation projects:", error) return NextResponse.json({ error: "Failed to fetch installation projects" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const projectData = await request.json() const newProject = await projectService.createProject(projectData) return NextResponse.json(newProject, { status: 201 }) } catch (error) { console.error("Error creating installation project:", error) return NextResponse.json({ error: "Failed to create installation project" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/installation/projects/[id]/route.ts" import { type NextRequest, NextResponse } from "next/server" import { InstallationProjectService } from "@/modules/installation/services/installation-project-service" const projectService = new InstallationProjectService() export async function GET(request: NextRequest, { params }: { params: { id: string } }) { try { const project = await projectService.getProjectById(params.id) if (!project) { return NextResponse.json({ error: "Installation project not found" }, { status: 404 }) } return NextResponse.json(project) } catch (error) { console.error("Error fetching installation project:", error) return NextResponse.json({ error: "Failed to fetch installation project" }, { status: 500 }) } } export async function PUT(request: NextRequest, { params }: { params: { id: string } }) { try { const projectData = await request.json() const updatedProject = await projectService.updateProject(params.id, projectData) return NextResponse.json(updatedProject) } catch (error) { console.error("Error updating installation project:", error) return NextResponse.json({ error: "Failed to update installation project" }, { status: 500 }) } } export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) { try { const success = await projectService.deleteProject(params.id) if (!success) { return NextResponse.json({ error: "Failed to delete installation project" }, { status: 400 }) } return NextResponse.json({ success: true }) } catch (error) { console.error("Error deleting installation project:", error) return NextResponse.json({ error: "Failed to delete installation project" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/installation/teams/route.ts" import { type NextRequest, NextResponse } from "next/server" import { TeamService } from "@/modules/installation/services/team-service" const teamService = new TeamService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const type = searchParams.getAll("type") const specialties = searchParams.getAll("specialties") const status = searchParams.getAll("status") const search = searchParams.get("search") const availableOn = searchParams.get("availableOn") const minMembers = searchParams.get("minMembers") const maxMembers = searchParams.get("maxMembers") // Build filter object const filter: any = {} if (type.length > 0) filter.type = type if (specialties.length > 0) filter.specialties = specialties if (status.length > 0) filter.status = status if (search) filter.search = search if (availableOn) filter.availableOn = new Date(availableOn) if (minMembers || maxMembers) { filter.memberCount = {} if (minMembers) filter.memberCount.min = Number(minMembers) if (maxMembers) filter.memberCount.max = Number(maxMembers) } const teams = await teamService.getTeams(filter) return NextResponse.json(teams) } catch (error) { console.error("Error fetching teams:", error) return NextResponse.json({ error: "Failed to fetch teams" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const teamData = await request.json() const newTeam = await teamService.createTeam(teamData) return NextResponse.json(newTeam, { status: 201 }) } catch (error) { console.error("Error creating team:", error) return NextResponse.json({ error: "Failed to create team" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/installation/schedule/route.ts" import { type NextRequest, NextResponse } from "next/server" import { ScheduleService } from "@/modules/installation/services/schedule-service" const scheduleService = new ScheduleService() export async function GET(request: NextRequest) { try { // Parse query parameters for filtering const searchParams = request.nextUrl.searchParams const status = searchParams.getAll("status") const teamIds = searchParams.getAll("teamIds") const hasDelays = searchParams.get("hasDelays") const search = searchParams.get("search") const startDate = searchParams.get("startDate") const endDate = searchParams.get("endDate") // Build filter object const filter: any = {} if (status.length > 0) filter.status = status if (teamIds.length > 0) filter.teamIds = teamIds if (hasDelays) filter.hasDelays = hasDelays === "true" if (search) filter.search = search if (startDate && endDate) { filter.dateRange = { start: new Date(startDate), end: new Date(endDate), } } const schedules = await scheduleService.getSchedules(filter) return NextResponse.json(schedules) } catch (error) { console.error("Error fetching schedules:", error) return NextResponse.json({ error: "Failed to fetch schedules" }, { status: 500 }) } } export async function POST(request: NextRequest) { try { const scheduleData = await request.json() const newSchedule = await scheduleService.createSchedule(scheduleData) return NextResponse.json(newSchedule, { status: 201 }) } catch (error) { console.error("Error creating schedule:", error) return NextResponse.json({ error: "Failed to create schedule" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="modules/installation/utils/index.ts" export * from "./date-utils" export * from "./format-utils" export * from "./validation-utils" export * from "./calculation-utils" export * from "./export-utils" export * from "./import-utils" export * from "./filter-utils" export * from "./sort-utils" [V0_FILE]typescriptreact:file="modules/installation/utils/date-utils.ts" export const formatDate = (date: Date | string | undefined, format = "dd/MM/yyyy"): string => { if (!date) return "N/A" const d = typeof date === "string" ? new Date(date) : date if (isNaN(d.getTime())) { return "Data Inválida" } const day = d.getDate().toString().padStart(2, "0") const month = (d.getMonth() + 1).toString().padStart(2, "0") const year = d.getFullYear() return format .replace("dd", day) .replace("MM", month) .replace("yyyy", year.toString()) .replace("yy", year.toString().slice(-2)) } export const parseDate = (dateString: string, format = "dd/MM/yyyy"): Date => { if (!dateString) return new Date(Number.NaN) // Handle different formats if (format === "dd/MM/yyyy") { const [day, month, year] = dateString.split("/").map(Number) return new Date(year, month - 1, day) } else if (format === "MM/dd/yyyy") { const [month, day, year] = dateString.split("/").map(Number) return new Date(year, month - 1, day) } else if (format === "yyyy-MM-dd") { const [year, month, day] = dateString.split("-").map(Number) return new Date(year, month - 1, day) } // Default to ISO format return new Date(dateString) } export const addDays = (date: Date, days: number): Date => { const result = new Date(date) result.setDate(result.getDate() + days) return result } export const addMonths = (date: Date, months: number): Date => { const result = new Date(date) result.setMonth(result.getMonth() + months) return result } export const addYears = (date: Date, years: number): Date => { const result = new Date(date) result.setFullYear(result.getFullYear() + years) return result } export const getDateDifference = (date1: Date, date2: Date, unit: "days" | "months" | "years"): number => { const diffTime = Math.abs(date2.getTime() - date1.getTime()) if (unit === "days") { return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) } else if (unit === "months") { const yearDiff = date2.getFullYear() - date1.getFullYear() const monthDiff = date2.getMonth() - date1.getMonth() return yearDiff * 12 + monthDiff } else if (unit === "years") { return date2.getFullYear() - date1.getFullYear() } return 0 } export const isDateInRange = (date: Date, startDate: Date, endDate: Date): boolean => { return date >= startDate && date <= endDate } export const getWorkingDays = (startDate: Date, endDate: Date): number => { let count = 0 const curDate = new Date(startDate.getTime()) while (curDate <= endDate) { const dayOfWeek = curDate.getDay() if (dayOfWeek !== 0 && dayOfWeek !== 6) count++ curDate.setDate(curDate.getDate() + 1) } return count } export const getWeekNumber = (date: Date): number => { const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())) const dayNum = d.getUTCDay() || 7 d.setUTCDate(d.getUTCDate() + 4 - dayNum) const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1)) return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7) } export const formatDateRange = (startDate: Date, endDate: Date): string => { if (startDate.getFullYear() === endDate.getFullYear()) { if (startDate.getMonth() === endDate.getMonth()) { if (startDate.getDate() === endDate.getDate()) { return formatDate(startDate) } else { return `${startDate.getDate()} - ${endDate.getDate()}/${(endDate.getMonth() + 1).toString().padStart(2, "0")}/${endDate.getFullYear()}` } } else { return `${startDate.getDate()}/${(startDate.getMonth() + 1).toString().padStart(2, "0")} - ${endDate.getDate()}/${(endDate.getMonth() + 1).toString().padStart(2, "0")}/${endDate.getFullYear()}` } } else { return `${formatDate(startDate)} - ${formatDate(endDate)}` } } [V0_FILE]typescriptreact:file="modules/installation/utils/format-utils.ts" export const formatCurrency = (value: number, currency = "BRL", locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { style: "currency", currency, }).format(value) } export const formatPercentage = (value: number, decimals = 2, locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { style: "percent", minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value / 100) } export const formatNumber = (value: number, decimals = 0, locale = "pt-BR"): string => { return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value) } export const formatPhoneNumber = (phone: string): string => { // Format Brazilian phone numbers if (!phone) return "" // Remove non-numeric characters const cleaned = phone.replace(/\D/g, "") // Format according to length if (cleaned.length === 11) { // Mobile with DDD return `(${cleaned.substring(0, 2)}) ${cleaned.substring(2, 7)}-${cleaned.substring(7)}` } else if (cleaned.length === 10) { // Landline with DDD return `(${cleaned.substring(0, 2)}) ${cleaned.substring(2, 6)}-${cleaned.substring(6)}` } else if (cleaned.length === 9) { // Mobile without DDD return `${cleaned.substring(0, 5)}-${cleaned.substring(5)}` } else if (cleaned.length === 8) { // Landline without DDD return `${cleaned.substring(0, 4)}-${cleaned.substring(4)}` } // Return as is if it doesn't match expected formats return phone } export const formatFileSize = (bytes: number): string => { if (bytes === 0) return "0 Bytes" const k = 1024 const sizes = ["Bytes", "KB", "MB", "GB", "TB"] const i = Math.floor(Math.log(bytes) / Math.log(k)) return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i] } export const truncateText = (text: string, maxLength: number): string => { if (!text || text.length <= maxLength) return text return `${text.substring(0, maxLength)}...` } export const capitalizeFirstLetter = (text: string): string => { if (!text) return "" return text.charAt(0).toUpperCase() + text.slice(1) } export const formatDuration = (minutes: number): string => { const hours = Math.floor(minutes / 60) const mins = minutes % 60 if (hours === 0) { return `${mins}min` } else if (mins === 0) { return `${hours}h` } else { return `${hours}h ${mins}min` } } export const formatAddress = (address: { address: string city: string state: string zipCode: string }): string => { return `${address.address}, ${address.city} - ${address.state}, ${address.zipCode}` } export const formatSystemSize = (size: number): string => { return `${size.toFixed(2)} kWp` } [V0_FILE]typescriptreact:file="modules/installation/utils/calculation-utils.ts" export const calculateProjectDuration = (startDate: Date, endDate: Date): number => { const diffTime = Math.abs(endDate.getTime() - startDate.getTime()) return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) } export const calculateWorkingDays = (startDate: Date, endDate: Date): number => { let count = 0 const curDate = new Date(startDate.getTime()) while (curDate <= endDate) { const dayOfWeek = curDate.getDay() if (dayOfWeek !== 0 && dayOfWeek !== 6) count++ curDate.setDate(curDate.getDate() + 1) } return count } export const calculateDelay = (plannedEndDate: Date, actualEndDate: Date): number => { if (!actualEndDate) return 0 const diffTime = Math.abs(actualEndDate.getTime() - plannedEndDate.getTime()) return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) } export const calculateProgressPercentage = (completedTasks: number, totalTasks: number): number => { if (totalTasks === 0) return 0 return (completedTasks / totalTasks) * 100 } export const calculateTeamUtilization = (assignedHours: number, availableHours: number): number => { if (availableHours === 0) return 0 return (assignedHours / availableHours) * 100 } export const calculateEstimatedCompletion = (startDate: Date, progress: number, totalDuration: number): Date => { if (progress >= 100) return new Date() const elapsedTime = new Date().getTime() - startDate.getTime() const estimatedTotalTime = elapsedTime / (progress / 100) const remainingTime = estimatedTotalTime - elapsedTime return new Date(new Date().getTime() + remainingTime) } export const calculateCriticalPath = (phases: any[]): string[] => { // Simplified critical path calculation // In a real implementation, this would use a proper algorithm return phases .sort((a, b) => b.estimatedDuration - a.estimatedDuration) .slice(0, 3) .map((phase) => phase.id) } export const calculateResourceAllocation = (teamSize: number, projectSize: number, complexity: number): number => { // Simple resource allocation calculation // In a real implementation, this would be more sophisticated const baseAllocation = projectSize * 0.5 const complexityFactor = complexity * 0.3 const teamFactor = Math.min(teamSize * 0.2, 1) return baseAllocation + complexityFactor + teamFactor } export const calculateRiskScore = ( delayProbability: number, delayImpact: number, qualityProbability: number, qualityImpact: number, costProbability: number, costImpact: number, ): number => { const delayRisk = delayProbability * delayImpact const qualityRisk = qualityProbability * qualityImpact const costRisk = costProbability * costImpact return (delayRisk + qualityRisk + costRisk) / 3 } export const calculateEfficiencyScore = ( plannedHours: number, actualHours: number, plannedCost: number, actualCost: number, plannedDuration: number, actualDuration: number, ): number => { const timeEfficiency = plannedHours > 0 ? plannedHours / actualHours : 0 const costEfficiency = plannedCost > 0 ? plannedCost / actualCost : 0 const durationEfficiency = plannedDuration > 0 ? plannedDuration / actualDuration : 0 return ((timeEfficiency + costEfficiency + durationEfficiency) / 3) * 100 } [V0_FILE]typescriptreact:file="modules/installation/utils/validation-utils.ts" export const isValidEmail = (email: string): boolean => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } export const isValidPhone = (phone: string): boolean => { // Validate Brazilian phone numbers // Remove non-numeric characters const cleaned = phone.replace(/\D/g, "") // Check if it has a valid length for Brazilian numbers return cleaned.length >= 10 && cleaned.length <= 11 } export const isValidCNPJ = (cnpj: string): boolean => { // Validate Brazilian CNPJ cnpj = cnpj.replace(/[^\d]/g, "") if (cnpj.length !== 14) return false // Check for known invalid patterns if (/^(\d)\1+$/.test(cnpj)) return false // Validate check digits let size = cnpj.length - 2 let numbers = cnpj.substring(0, size) const digits = cnpj.substring(size) let sum = 0 let pos = size - 7 for (let i = size; i >= 1; i--) { sum += Number.parseInt(numbers.charAt(size - i)) * pos-- if (pos < 2) pos = 9 } let result = sum % 11 < 2 ? 0 : 11 - (sum % 11) if (result !== Number.parseInt(digits.charAt(0))) return false size = size + 1 numbers = cnpj.substring(0, size) sum = 0 pos = size - 7 for (let i = size; i >= 1; i--) { sum += Number.parseInt(numbers.charAt(size - i)) * pos-- if (pos < 2) pos = 9 } result = sum % 11 < 2 ? 0 : 11 - (sum % 11) return result === Number.parseInt(digits.charAt(1)) } export const isValidCPF = (cpf: string): boolean => { // Validate Brazilian CPF cpf = cpf.replace(/[^\d]/g, "") if (cpf.length !== 11) return false // Check for known invalid patterns if (/^(\d)\1+$/.test(cpf)) return false // Validate first check digit let sum = 0 for (let i = 0; i < 9; i++) { sum += Number.parseInt(cpf.charAt(i)) * (10 - i) } let result = 11 - (sum % 11) if (result === 10 || result === 11) result = 0 if (result !== Number.parseInt(cpf.charAt(9))) return false // Validate second check digit sum = 0 for (let i = 0; i < 10; i++) { sum += Number.parseInt(cpf.charAt(i)) * (11 - i) } result = 11 - (sum % 11) if (result === 10 || result === 11) result = 0 return result === Number.parseInt(cpf.charAt(10)) } export const isValidZipCode = (zipCode: string): boolean => { // Validate Brazilian ZIP code (CEP) const cleaned = zipCode.replace(/\D/g, "") return cleaned.length === 8 } export const isValidDate = (date: string): boolean => { // Validate date format (DD/MM/YYYY) const dateRegex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/ if (!dateRegex.test(date)) return false // Check if it's a valid date const [day, month, year] = date.split("/").map(Number) const dateObj = new Date(year, month - 1, day) return dateObj.getFullYear() === year && dateObj.getMonth() === month - 1 && dateObj.getDate() === day } export const isRequired = (value: any): boolean => { if (value === null || value === undefined) return false if (typeof value === "string") return value.trim().length > 0 return true } export const minLength = (value: string, min: number): boolean => { if (!value) return false return value.length >= min } export const maxLength = (value: string, max: number): boolean => { if (!value) return true return value.length <= max } export const isNumber = (value: any): boolean => { if (typeof value === "number") return true if (typeof value !== "string") return false return !isNaN(Number(value)) } export const isPositive = (value: number): boolean => { return value > 0 } export const isNonNegative = (value: number): boolean => { return value >= 0 } export const isValidSystemSize = (size: number): boolean => { return isNumber(size) && isPositive(size) && size <= 10000 // Assuming max 10MW } export const isValidPanelCount = (count: number): boolean => { return isNumber(count) && Number.isInteger(count) && isPositive(count) } export const isValidCoordinates = (latitude: number, longitude: number): boolean => { return ( isNumber(latitude) && isNumber(longitude) && latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180 ) } export const isValidPhaseSequence = (phases: any[]): boolean => { // Check if phases have valid dependencies for (const phase of phases) { if (phase.dependencies && phase.dependencies.length > 0) { for (const depId of phase.dependencies) { const dependency = phases.find((p) => p.id === depId) if (!dependency) return false if (dependency.order >= phase.order) return false } } } return true } export const isValidTeamAssignment = (team: any, project: any): boolean => { // Check if team has required specialties for the project if (!team.specialties || !project.systemSize) return false // Example validation logic if (project.systemSize > 100 && !team.specialties.includes("COMMERCIAL")) return false if (project.systemSize > 500 && !team.specialties.includes("INDUSTRIAL")) return false return true } [V0_FILE]typescriptreact:file="modules/installation/components/schedule/index.ts" export * from "./schedule-calendar" export * from "./schedule-form" export * from "./schedule-detail" export * from "./schedule-filter" export * from "./phase-form" export * from "./task-form" export * from "./delay-report" export * from "./gantt-chart" [V0_FILE]typescriptreact:file="modules/installation/components/schedule/schedule-calendar.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Calendar, Clock, Users, AlertTriangle } from "lucide-react" import { formatDate } from "../../utils/date-utils" export function ScheduleCalendar() { const [view, setView] = useState<"month" | "week" | "day">("month") const [currentDate, setCurrentDate] = useState(new Date()) // This would come from a real data source const scheduleData = { events: [ { id: "1", title: "Instalação Residencial Solar Ville", start: new Date(2023, 10, 15, 8, 0), end: new Date(2023, 10, 17, 17, 0), projectId: "p1", teamId: "t1", status: "scheduled", type: "phase", location: "São Paulo, SP", team: "Equipe Alpha", }, { id: "2", title: "Instalação Comercial Têxtil Nacional", start: new Date(2023, 10, 22, 8, 0), end: new Date(2023, 10, 24, 17, 0), projectId: "p2", teamId: "t2", status: "scheduled", type: "phase", location: "Rio de Janeiro, RJ", team: "Equipe Beta", }, { id: "3", title: "Inspeção Final - Residencial Bom Preço", start: new Date(2023, 10, 28, 13, 0), end: new Date(2023, 10, 28, 17, 0), projectId: "p3", teamId: "t3", status: "scheduled", type: "task", location: "Belo Horizonte, MG", team: "Equipe Gamma", }, { id: "4", title: "Manutenção Preventiva - Comercial Tech", start: new Date(2023, 11, 5, 9, 0), end: new Date(2023, 11, 5, 12, 0), projectId: "p4", teamId: "t1", status: "scheduled", type: "task", location: "Curitiba, PR", team: "Equipe Alpha", }, { id: "5", title: "Instalação Residencial Parque Verde", start: new Date(2023, 11, 10, 8, 0), end: new Date(2023, 11, 12, 17, 0), projectId: "p5", teamId: "t2", status: "scheduled", type: "phase", location: "Fortaleza, CE", team: "Equipe Beta", hasDelay: true, delayReason: "Atraso na entrega de equipamentos", }, ], conflicts: [ { date: new Date(2023, 11, 10), teams: ["Equipe Beta", "Equipe Delta"], projects: ["Instalação Residencial Parque Verde", "Manutenção Comercial Centro"], }, ], } const getStatusColor = (status: string) => { switch (status) { case "scheduled": return "bg-blue-500" case "in_progress": return "bg-green-500" case "completed": return "bg-teal-500" case "delayed": return "bg-yellow-500" case "canceled": return "bg-red-500" default: return "bg-gray-500" } } const getTypeIcon = (type: string) => { switch (type) { case "phase": return case "task": return case "milestone": return default: return } } // Generate days for the current month view const getDaysInMonth = (year: number, month: number) => { const date = new Date(year, month, 1) const days = [] // Get the first day of the month const firstDay = new Date(date.getFullYear(), date.getMonth(), 1) const startingDay = firstDay.getDay() // 0 = Sunday, 1 = Monday, etc. // Add days from previous month to fill the first week const prevMonthDays = startingDay === 0 ? 6 : startingDay - 1 // Adjust for Monday as first day for (let i = prevMonthDays; i > 0; i--) { const prevDate = new Date(date.getFullYear(), date.getMonth(), 1 - i) days.push({ date: prevDate, isCurrentMonth: false }) } // Add all days in current month const daysInMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate() for (let i = 1; i <= daysInMonth; i++) { const currentDate = new Date(date.getFullYear(), date.getMonth(), i) days.push({ date: currentDate, isCurrentMonth: true }) } // Add days from next month to complete the last week const lastDay = new Date(date.getFullYear(), date.getMonth(), daysInMonth) const endingDay = lastDay.getDay() const nextMonthDays = endingDay === 0 ? 0 : 7 - endingDay for (let i = 1; i <= nextMonthDays; i++) { const nextDate = new Date(date.getFullYear(), date.getMonth() + 1, i) days.push({ date: nextDate, isCurrentMonth: false }) } return days } const days = getDaysInMonth(currentDate.getFullYear(), currentDate.getMonth()) // Group days into weeks const weeks = [] for (let i = 0; i < days.length; i += 7) { weeks.push(days.slice(i, i + 7)) } // Get events for a specific day const getEventsForDay = (date: Date) => { return scheduleData.events.filter( (event) => date.getFullYear() === event.start.getFullYear() && date.getMonth() === event.start.getMonth() && date.getDate() === event.start.getDate(), ) } // Check if a day has a conflict const hasConflict = (date: Date) => { return scheduleData.conflicts.some( (conflict) => date.getFullYear() === conflict.date.getFullYear() && date.getMonth() === conflict.date.getMonth() && date.getDate() === conflict.date.getDate(), ) } const previousMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1)) } const nextMonth = () => { setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)) } const goToToday = () => { setCurrentDate(new Date()) } return ( Agenda de Instalações

{currentDate.toLocaleDateString("pt-BR", { month: "long", year: "numeric" })}

{["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"].map((day) => (

{day}

))} {weeks.map((week, weekIndex) => week.map((day, dayIndex) => (

{day.date.getDate()} {hasConflict(day.date) && ( )}

{getEventsForDay(day.date).map((event) => (

{getTypeIcon(event.type)} {event.title}

{event.team}

{event.hasDelay && (

Atraso

)}

))}

)), )}

Legenda:

Agendado Em Progresso Concluído Atrasado Cancelado Conflito

) } [V0_FILE]typescriptreact:file="modules/installation/components/equipment/index.ts" export * from "./equipment-list" export * from "./equipment-form" export * from "./equipment-detail" export * from "./equipment-filter" export * from "./equipment-inventory" export * from "./equipment-assignment" export * from "./equipment-history" export * from "./equipment-inspection" [V0_FILE]typescriptreact:file="modules/installation/components/equipment/equipment-inventory.tsx" isFixed="true" "use client" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Package, Search, Download, Upload, Plus, SlidersHorizontal } from "lucide-react" import { formatDate } from "../../utils/date-utils" export function EquipmentInventory() { const [searchTerm, setSearchTerm] = useState("") const [filterType, setFilterType] = useState(undefined) const [filterStatus, setFilterStatus] = useState(undefined) const [filterCategory, setFilterCategory] = useState(undefined) // This would come from a real data source const inventoryData = { equipment: [ { id: "1", type: "SOLAR_PANEL", category: "INSTALLATION", manufacturer: "Canadian Solar", model: "CS3N-400MS", serialNumber: "CS123456789", quantity: 120, status: "AVAILABLE", location: "Depósito Central", purchaseDate: new Date(2023, 8, 15), warrantyExpiration: new Date(2033, 8, 15), condition: "NEW", }, { id: "2", type: "INVERTER", category: "INSTALLATION", manufacturer: "Fronius", model: "Primo 5.0-1", serialNumber: "FR987654321", quantity: 15, status: "ASSIGNED", location: "Depósito Central", assignedTo: "Projeto Residencial Solar Ville", purchaseDate: new Date(2023, 9, 5), warrantyExpiration: new Date(2028, 9, 5), condition: "NEW", }, { id: "3", type: "MOUNTING_SYSTEM", category: "INSTALLATION", manufacturer: "Kseng", model: "K-Rack", serialNumber: null, quantity: 80, status: "AVAILABLE", location: "Depósito Sul", purchaseDate: new Date(2023, 7, 20), warrantyExpiration: new Date(2028, 7, 20), condition: "NEW", }, { id: "4", type: "BATTERY", category: "INSTALLATION", manufacturer: "BYD", model: "Battery-Box Premium HVS 10.2", serialNumber: "BYD567890123", quantity: 5, status: "IN_TRANSIT", location: "Em trânsito para Depósito Norte", purchaseDate: new Date(2023, 10, 1), warrantyExpiration: new Date(2033, 10, 1), condition: "NEW", }, { id: "5", type: "SOLAR_PANEL", category: "REPLACEMENT", manufacturer: "JinkoSolar", model: "Tiger Pro 455W", serialNumber: "JS123456789", quantity: 30, status: "AVAILABLE", location: "Depósito Norte", purchaseDate: new Date(2023, 6, 10), warrantyExpiration: new Date(2033, 6, 10), condition: "NEW", }, { id: "6", type: "TOOL", category: "COMPANY_OWNED", manufacturer: "Bosch", model: "GSR 18V-50", serialNumber: "BS123456789", quantity: 10, status: "ASSIGNED", location: "Equipe Alpha", assignedTo: "Equipe Alpha", purchaseDate: new Date(2023, 5, 15), warrantyExpiration: new Date(2025, 5, 15), condition: "GOOD", }, { id: "7", type: "INVERTER", category: "REPLACEMENT", manufacturer: "SMA", model: "Sunny Boy 5.0", serialNumber: "SMA123456789", quantity: 3, status: "DEFECTIVE", location: "Depósito Central - Área de Manutenção", purchaseDate: new Date(2023, 4, 20), warrantyExpiration: new Date(2028, 4, 20), condition: "DAMAGED", }, ], summary: { totalItems: 263, totalValue: 1250000, byStatus: { AVAILABLE: 230, ASSIGNED: 25, IN_TRANSIT: 5, INSTALLED: 0, UNDER_MAINTENANCE: 0, DEFECTIVE: 3, RETIRED: 0, }, byType: { SOLAR_PANEL: 150, INVERTER: 18, BATTERY: 5, MOUNTING_SYSTEM: 80, TOOL: 10, }, byLocation: { "Depósito Central": 135, "Depósito Sul": 80, "Depósito Norte": 30, "Em trânsito": 5, "Equipe Alpha": 10, "Área de Manutenção": 3, }, }, } const getStatusBadgeColor = (status: string) => { switch (status) { case "AVAILABLE": return "bg-green-500" case "ASSIGNED": return "bg-blue-500" case "IN_TRANSIT": return "bg-yellow-500" case "INSTALLED": return "bg-teal-500" case "UNDER_MAINTENANCE": return "bg-purple-500" case "DEFECTIVE": return "bg-red-500" case "RETIRED": return "bg-gray-500" default: return "bg-gray-500" } } const getConditionBadgeColor = (condition: string) => { switch (condition) { case "NEW": return "bg-green-500" case "EXCELLENT": return "bg-teal-500" case "GOOD": return "bg-blue-500" case "FAIR": return "bg-yellow-500" case "POOR": return "bg-orange-500" case "DAMAGED": return "bg-red-500" case "UNUSABLE": return "bg-gray-500" default: return "bg-gray-500" } } const filteredEquipment = inventoryData.equipment.filter((item) => { const matchesSearch = searchTerm === "" || item.manufacturer.toLowerCase().includes(searchTerm.toLowerCase()) || item.model.toLowerCase().includes(searchTerm.toLowerCase()) || (item.serialNumber && item.serialNumber.toLowerCase().includes(searchTerm.toLowerCase())) || item.location.toLowerCase().includes(searchTerm.toLowerCase()) const matchesType = !filterType || item.type === filterType const matchesStatus = !filterStatus || item.status === filterStatus const matchesCategory = !filterCategory || item.category === filterCategory return matchesSearch && matchesType && matchesStatus && matchesCategory }) return (

Total de Itens

{inventoryData.summary.totalItems}

Disponíveis

{inventoryData.summary.byStatus.AVAILABLE}

{Math.round((inventoryData.summary.byStatus.AVAILABLE / inventoryData.summary.totalItems) * 100)}%

Atribuídos

{inventoryData.summary.byStatus.ASSIGNED}

{Math.round((inventoryData.summary.byStatus.ASSIGNED / inventoryData.summary.totalItems) * 100)}%

Defeituosos

{inventoryData.summary.byStatus.DEFECTIVE}

{Math.round((inventoryData.summary.byStatus.DEFECTIVE / inventoryData.summary.totalItems) * 100)}%

Inventário de Equipamentos

setSearchTerm(e.target.value)} className="pl-8" />

Tipo Fabricante Modelo Número de Série Quantidade Status Condição Localização Data de Compra Garantia até {filteredEquipment.length === 0 ? ( Nenhum equipamento encontrado ) : ( filteredEquipment.map((item) => ( {item.type.replace("_", " ")} {item.manufacturer} {item.model} {item.serialNumber || "N/A"} {item.quantity} {item.status} {item.condition} {item.location} {formatDate(item.purchaseDate)} {formatDate(item.warrantyExpiration)} )) )}

) } [V0_FILE]typescriptreact:file="modules/installation/components/inspections/index.ts" export * from "./inspection-list" export * from "./inspection-form" export * from "./inspection-detail" export * from "./inspection-filter" export * from "./inspection-report" export * from "./inspection-checklist" export * from "./inspection-findings" export * from "./inspection-schedule" [V0_FILE]typescriptreact:file="modules/installation/services/checklist-service.ts" import type { Checklist, ChecklistFilter, ChecklistType, ChecklistCategory, ChecklistStatus, ChecklistSection, ChecklistItem, Signature, } from "../types/checklist" export class ChecklistService { async getChecklists(filter?: ChecklistFilter): Promise { // Implementation would fetch checklists from API with optional filtering return [] } async getChecklistById(id: string): Promise { // Implementation would fetch a specific checklist by ID return null } async createChecklist(checklist: Omit): Promise { // Implementation would create a new checklist return {} as Checklist } async updateChecklist(id: string, checklist: Partial): Promise { // Implementation would update an existing checklist return {} as Checklist } async deleteChecklist(id: string): Promise { // Implementation would delete a checklist return true } async changeChecklistStatus(id: string, status: ChecklistStatus): Promise { // Implementation would update just the status of a checklist return {} as Checklist } async addSection(checklistId: string, section: Omit): Promise { // Implementation would add a section to a checklist return {} as ChecklistSection } async updateSection( checklistId: string, sectionId: string, section: Partial, ): Promise { // Implementation would update a section in a checklist return {} as ChecklistSection } async deleteSection(checklistId: string, sectionId: string): Promise { // Implementation would delete a section from a checklist return true } async addItem(checklistId: string, sectionId: string, item: Omit): Promise { // Implementation would add an item to a section return {} as ChecklistItem } async updateItem( checklistId: string, sectionId: string, itemId: string, item: Partial, ): Promise { // Implementation would update an item in a section return {} as ChecklistItem } async deleteItem(checklistId: string, sectionId: string, itemId: string): Promise { // Implementation would delete an item from a section return true } async completeItem( checklistId: string, sectionId: string, itemId: string, value: any, notes?: string, photos?: string[], ): Promise { // Implementation would mark an item as completed with a value, optional notes, and photos return {} as ChecklistItem } async addSignature(checklistId: string, signature: Omit): Promise { // Implementation would add a signature to a checklist return {} as Signature } async completeChecklist(checklistId: string): Promise { // Implementation would mark a checklist as completed return {} as Checklist } async getChecklistTemplates(type?: ChecklistType, category?: ChecklistCategory): Promise { // Implementation would fetch checklist templates return [] } async createChecklistFromTemplate(templateId: string, projectId: string): Promise { // Implementation would create a new checklist from a template return {} as Checklist } async getChecklistsByProject(projectId: string): Promise { // Implementation would fetch checklists for a specific project return [] } async getChecklistProgress(checklistId: string): Promise<{ totalItems: number completedItems: number progress: number sectionsProgress: { sectionId: string sectionTitle: string totalItems: number completedItems: number progress: number }[] }> { // Implementation would calculate the progress of a checklist return { totalItems: 0, completedItems: 0, progress: 0, sectionsProgress: [], } } } [V0_FILE]typescriptreact:file="modules/installation/hooks/use-checklists.ts" "use client" import { useState, useEffect, useCallback } from "react" import type { Checklist, ChecklistFilter, ChecklistStatus, ChecklistSection, ChecklistItem, Signature, } from "../types/checklist" import { ChecklistService } from "../services/checklist-service" export function useChecklists(initialFilter?: ChecklistFilter) { const [checklists, setChecklists] = useState([]) const [loading, setLoading] = useState(false) const [error, setError] = useState(null) const [filter, setFilter] = useState(initialFilter) const checklistService = new ChecklistService() const fetchChecklists = useCallback(async () => { setLoading(true) setError(null) try { const data = await checklistService.getChecklists(filter) setChecklists(data) } catch (err) { setError(err instanceof Error ? err.message : "Failed to fetch checklists") } finally { setLoading(false) } }, [filter]) useEffect(() => { fetchChecklists() }, [fetchChecklists]) const createChecklist = async (checklist: Omit) => { setLoading(true) setError(null) try { const newChecklist = await checklistService.createChecklist(checklist) setChecklists((prev) => [...prev, newChecklist]) return newChecklist } catch (err) { setError(err instanceof Error ? err.message : "Failed to create checklist") throw err } finally { setLoading(false) } } const updateChecklist = async (id: string, checklist: Partial) => { setLoading(true) setError(null) try { const updatedChecklist = await checklistService.updateChecklist(id, checklist) setChecklists((prev) => prev.map((c) => (c.id === id ? updatedChecklist : c))) return updatedChecklist } catch (err) { setError(err instanceof Error ? err.message : "Failed to update checklist") throw err } finally { setLoading(false) } } const deleteChecklist = async (id: string) => { setLoading(true) setError(null) try { const success = await checklistService.deleteChecklist(id) if (success) { setChecklists((prev) => prev.filter((c) => c.id !== id)) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to delete checklist") throw err } finally { setLoading(false) } } const changeChecklistStatus = async (id: string, status: ChecklistStatus) => { setLoading(true) setError(null) try { const updatedChecklist = await checklistService.changeChecklistStatus(id, status) setChecklists((prev) => prev.map((c) => (c.id === id ? updatedChecklist : c))) return updatedChecklist } catch (err) { setError(err instanceof Error ? err.message : "Failed to change checklist status") throw err } finally { setLoading(false) } } const addSection = async (checklistId: string, section: Omit) => { setLoading(true) setError(null) try { const newSection = await checklistService.addSection(checklistId, section) setChecklists((prev) => prev.map((c) => (c.id === checklistId ? { ...c, sections: [...c.sections, newSection] } : c)), ) return newSection } catch (err) { setError(err instanceof Error ? err.message : "Failed to add section") throw err } finally { setLoading(false) } } const updateSection = async (checklistId: string, sectionId: string, section: Partial) => { setLoading(true) setError(null) try { const updatedSection = await checklistService.updateSection(checklistId, sectionId, section) setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, sections: c.sections.map((s) => (s.id === sectionId ? updatedSection : s)), } : c, ), ) return updatedSection } catch (err) { setError(err instanceof Error ? err.message : "Failed to update section") throw err } finally { setLoading(false) } } const deleteSection = async (checklistId: string, sectionId: string) => { setLoading(true) setError(null) try { const success = await checklistService.deleteSection(checklistId, sectionId) if (success) { setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, sections: c.sections.filter((s) => s.id !== sectionId), } : c, ), ) } return success } catch (err) { setError(err instanceof Error ? err.message : "Failed to delete section") throw err } finally { setLoading(false) } } const addItem = async (checklistId: string, sectionId: string, item: Omit) => { setLoading(true) setError(null) try { const newItem = await checklistService.addItem(checklistId, sectionId, item) setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, sections: c.sections.map((s) => (s.id === sectionId ? { ...s, items: [...s.items, newItem] } : s)), } : c, ), ) return newItem } catch (err) { setError(err instanceof Error ? err.message : "Failed to add item") throw err } finally { setLoading(false) } } const updateItem = async (checklistId: string, sectionId: string, itemId: string, item: Partial) => { setLoading(true) setError(null) try { const updatedItem = await checklistService.updateItem(checklistId, sectionId, itemId, item) setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, sections: c.sections.map((s) => s.id === sectionId ? { ...s, items: s.items.map((i) => (i.id === itemId ? updatedItem : i)), } : s, ), } : c, ), ) return updatedItem } catch (err) { setError(err instanceof Error ? err.message : "Failed to update item") throw err } finally { setLoading(false) } } const completeItem = async ( checklistId: string, sectionId: string, itemId: string, value: any, notes?: string, photos?: string[], ) => { setLoading(true) setError(null) try { const updatedItem = await checklistService.completeItem(checklistId, sectionId, itemId, value, notes, photos) setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, sections: c.sections.map((s) => s.id === sectionId ? { ...s, items: s.items.map((i) => (i.id === itemId ? updatedItem : i)), } : s, ), } : c, ), ) return updatedItem } catch (err) { setError(err instanceof Error ? err.message : "Failed to complete item") throw err } finally { setLoading(false) } } const addSignature = async (checklistId: string, signature: Omit) => { setLoading(true) setError(null) try { const newSignature = await checklistService.addSignature(checklistId, signature) setChecklists((prev) => prev.map((c) => c.id === checklistId ? { ...c, signatures: c.signatures ? [...c.signatures, newSignature] : [newSignature], } : c, ), ) return newSignature } catch (err) { setError(err instanceof Error ? err.message : "Failed to add signature") throw err } finally { setLoading(false) } } const completeChecklist = async (checklistId: string) => { setLoading(true) setError(null) try { const updatedChecklist = await checklistService.completeChecklist(checklistId) setChecklists((prev) => prev.map((c) => (c.id === checklistId ? updatedChecklist : c))) return updatedChecklist } catch (err) { setError(err instanceof Error ? err.message : "Failed to complete checklist") throw err } finally { setLoading(false) } } return { checklists, loading, error, filter, setFilter, fetchChecklists, createChecklist, updateChecklist, deleteChecklist, changeChecklistStatus, addSection, updateSection, deleteSection, addItem, updateItem, completeItem, addSignature, completeChecklist, } } [V0_FILE]typescriptreact:file="modules/installation/components/checklists/index.ts" export * from "./checklist-list" export * from "./checklist-form" export * from "./checklist-detail" export * from "./checklist-filter" export * from "./checklist-template-list" export * from "./checklist-execution" export * from "./checklist-progress" export * from "./checklist-signature-pad" [V0_FILE]typescriptreact:file="modules/installation/components/checklists/checklist-list.tsx" "use client" import { useState } from "react" import { useChecklists } from "../../hooks/use-checklists" import { type Checklist, ChecklistStatus, ChecklistType, ChecklistCategory } from "../../types/checklist" import { formatDate } from "../../utils/date-utils" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { MoreHorizontal, Edit, Trash, Copy, ExternalLink, CheckSquare, FileText } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { ChecklistFilter } from "./checklist-filter" interface ChecklistListProps { onEdit?: (checklist: Checklist) => void onDelete?: (checklist: Checklist) => void onView?: (checklist: Checklist) => void onDuplicate?: (checklist: Checklist) => void projectId?: string isTemplate?: boolean } export function ChecklistList({ onEdit, onDelete, onView, onDuplicate, projectId, isTemplate = false, }: ChecklistListProps) { const { checklists, loading, error, filter, setFilter, changeChecklistStatus } = useChecklists( projectId ? { projectId } : undefined, ) const [selectedChecklists, setSelectedChecklists] = useState([]) const getStatusBadgeColor = (status: ChecklistStatus) => { switch (status) { case ChecklistStatus.NOT_STARTED: return "bg-gray-500" case ChecklistStatus.IN_PROGRESS: return "bg-blue-500" case ChecklistStatus.COMPLETED: return "bg-green-500" case ChecklistStatus.REQUIRES_ATTENTION: return "bg-yellow-500" case ChecklistStatus.SKIPPED: return "bg-red-500" default: return "bg-gray-500" } } const getTypeBadgeColor = (type: ChecklistType) => { switch (type) { case ChecklistType.INSTALLATION: return "bg-blue-500" case ChecklistType.INSPECTION: return "bg-purple-500" case ChecklistType.SAFETY: return "bg-red-500" case ChecklistType.QUALITY: return "bg-green-500" case ChecklistType.COMMISSIONING: return "bg-yellow-500" case ChecklistType.MAINTENANCE: return "bg-teal-500" default: return "bg-gray-500" } } const getCategoryBadgeColor = (category: ChecklistCategory) => { switch (category) { case ChecklistCategory.PRE_INSTALLATION: return "bg-blue-500" case ChecklistCategory.MECHANICAL: return "bg-orange-500" case ChecklistCategory.ELECTRICAL: return "bg-yellow-500" case ChecklistCategory.ROOFING: return "bg-brown-500" case ChecklistCategory.SYSTEM_TESTING: return "bg-purple-500" case ChecklistCategory.FINAL_INSPECTION: return "bg-green-500" case ChecklistCategory.CUSTOMER_HANDOVER: return "bg-teal-500" default: return "bg-gray-500" } } const handleStatusChange = async (checklistId: string, status: ChecklistStatus) => { try { await changeChecklistStatus(checklistId, status) } catch (error) { console.error("Failed to change checklist status:", error) } } const toggleSelectChecklist = (checklistId: string) => { setSelectedChecklists((prev) => prev.includes(checklistId) ? prev.filter((id) => id !== checklistId) : [...prev, checklistId], ) } const selectAllChecklists = () => { if (selectedChecklists.length === checklists.length) { setSelectedChecklists([]) } else { setSelectedChecklists(checklists.map((checklist) => checklist.id)) } } if (error) { return

Error: {error}

} return ( {isTemplate ? "Modelos de Checklist" : "Checklists"}

0} onChange={selectAllChecklists} className="h-4 w-4 rounded border-gray-300" /> Nome Tipo Categoria Status Seções Itens {!isTemplate && Projeto} Criado em Versão Ações {loading ? ( Carregando... ) : checklists.length === 0 ? ( Nenhum checklist encontrado ) : ( checklists.map((checklist) => ( toggleSelectChecklist(checklist.id)} className="h-4 w-4 rounded border-gray-300" /> {checklist.name} {checklist.type} {checklist.category} {checklist.status} {checklist.sections.length} {checklist.sections.reduce((total, section) => total + section.items.length, 0)} {!isTemplate && ( {checklist.projectId ? "Projeto #" + checklist.projectId.substring(0, 8) : "N/A"} )} {formatDate(checklist.createdAt)} {checklist.version} Ações onView?.(checklist)}> Visualizar {!isTemplate && ( onView?.(checklist)}> Preencher )} onEdit?.(checklist)}> Editar onDuplicate?.(checklist)}> Duplicar {!isTemplate && ( Exportar PDF )} {!isTemplate && ( <> Alterar Status {Object.values(ChecklistStatus).map((status) => ( handleStatusChange(checklist.id, status)} disabled={checklist.status === status} > {status} Marcar como {status} ))} )} onDelete?.(checklist)} className="text-red-600"> Excluir )) )}

) } [V0_FILE]typescriptreact:file="modules/installation/components/checklists/checklist-filter.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { type ChecklistFilter as ChecklistFilterType, ChecklistType, ChecklistCategory, ChecklistStatus, } from "../../types/checklist" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Calendar } from "@/components/ui/calendar" import { CalendarIcon, Filter, X } from "lucide-react" import { format } from "date-fns" import { ptBR } from "date-fns/locale" interface ChecklistFilterProps { filter?: ChecklistFilterType onFilterChange: (filter: ChecklistFilterType) => void isTemplate?: boolean } export function ChecklistFilter({ filter, onFilterChange, isTemplate = false }: ChecklistFilterProps) { const [localFilter, setLocalFilter] = useState(filter || {}) const [isOpen, setIsOpen] = useState(false) useEffect(() => { if (filter) { setLocalFilter(filter) } }, [filter]) const handleFilterChange = (key: keyof ChecklistFilterType, value: any) => { const newFilter = { ...localFilter, [key]: value } setLocalFilter(newFilter) } const handleDateRangeChange = (field: "start" | "end", date?: Date) => { const dateRange = localFilter.dateRange || { start: undefined, end: undefined } const newDateRange = { ...dateRange, [field]: date } handleFilterChange("dateRange", newDateRange) } const applyFilter = () => { onFilterChange(localFilter) setIsOpen(false) } const clearFilter = () => { const emptyFilter: ChecklistFilterType = {} setLocalFilter(emptyFilter) onFilterChange(emptyFilter) setIsOpen(false) } const hasActiveFilters = () => { return ( localFilter.type !== undefined || localFilter.category !== undefined || localFilter.status !== undefined || localFilter.dateRange !== undefined || localFilter.search !== undefined || localFilter.projectId !== undefined ) } return (

handleFilterChange("search", e.target.value)} className="w-full" />

Filtrar Checklists

Tipo

Categoria

{!isTemplate && (

Status

)}

Data Inicial handleDateRangeChange("start", date)} initialFocus locale={ptBR} />

Data Final handleDateRangeChange("end", date)} initialFocus locale={ptBR} />

{hasActiveFilters() && (

{localFilter.type && ( Tipo: {localFilter.type} { handleFilterChange("type", undefined) applyFilter() }} /> )} {localFilter.category && ( Categoria: {localFilter.category} { handleFilterChange("category", undefined) applyFilter() }} /> )} {localFilter.status && ( Status: {localFilter.status} { handleFilterChange("status", undefined) applyFilter() }} /> )} {localFilter.dateRange?.start && ( De: {format(localFilter.dateRange.start, "dd/MM/yyyy")} { handleDateRangeChange("start", undefined) applyFilter() }} /> )} {localFilter.dateRange?.end && ( Até: {format(localFilter.dateRange.end, "dd/MM/yyyy")} { handleDateRangeChange("end", undefined) applyFilter() }} /> )}

)}

) } import { Badge } from "@/components/ui/badge" [V0_FILE]typescriptreact:file="modules/installation/components/checklists/checklist-execution.tsx" "use client" import { useState, useEffect } from "react" import { useChecklists } from "../../hooks/use-checklists" import { type Checklist, ChecklistStatus } from "../../types/checklist" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Checkbox, Input, Textarea, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, RadioGroup, RadioGroupItem, } from "@/components/ui/ui" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { CheckSquare, AlertTriangle, Camera, Upload, Save, FileText, CheckCircle2, XCircle, HelpCircle, } from "lucide-react" import { formatDate } from "../../utils/date-utils" import { ChecklistSignaturePad } from "./checklist-signature-pad" interface ChecklistExecutionProps { checklistId: string onComplete?: () => void onSave?: () => void } export function ChecklistExecution({ checklistId, onComplete, onSave }: ChecklistExecutionProps) { const { checklists, loading, error, completeItem, addSignature, completeChecklist } = useChecklists() const [checklist, setChecklist] = useState(null) const [activeSection, setActiveSection] = useState(null) const [progress, setProgress] = useState<{ totalItems: number completedItems: number progress: number sectionsProgress: { sectionId: string sectionTitle: string totalItems: number completedItems: number progress: number }[] }>({ totalItems: 0, completedItems: 0, progress: 0, sectionsProgress: [], }) useEffect(() => { const foundChecklist = checklists.find((c) => c.id === checklistId) if (foundChecklist) { setChecklist(foundChecklist) // Calculate initial progress const totalItems = foundChecklist.sections.reduce((total, section) => total + section.items.length, 0) const completedItems = foundChecklist.sections.reduce( (total, section) => total + section.items.filter( (item) => item.status === "passed" || item.status === "failed" || item.status === "na" || item.status === "skipped", ).length, 0, ) const sectionsProgress = foundChecklist.sections.map((section) => { const sectionTotalItems = section.items.length const sectionCompletedItems = section.items.filter( (item) => item.status === "passed" || item.status === "failed" || item.status === "na" || item.status === "skipped", ).length return { sectionId: section.id, sectionTitle: section.title, totalItems: sectionTotalItems, completedItems: sectionCompletedItems, progress: sectionTotalItems > 0 ? (sectionCompletedItems / sectionTotalItems) * 100 : 0, } }) setProgress({ totalItems, completedItems, progress: totalItems > 0 ? (completedItems / totalItems) * 100 : 0, sectionsProgress, }) // Set first section as active if none is active if (!activeSection && foundChecklist.sections.length > 0) { setActiveSection(foundChecklist.sections[0].id) } } }, [checklists, checklistId, activeSection]) const handleItemComplete = async ( sectionId: string, itemId: string, value: any, status: "passed" | "failed" | "na" | "skipped", notes?: string, ) => { if (!checklist) return try { await completeItem(checklistId, sectionId, itemId, value, notes) // Update local progress const updatedChecklist = { ...checklist } const sectionIndex = updatedChecklist.sections.findIndex((s) => s.id === sectionId) if (sectionIndex >= 0) { const itemIndex = updatedChecklist.sections[sectionIndex].items.findIndex((i) => i.id === itemId) if (itemIndex >= 0) { updatedChecklist.sections[sectionIndex].items[itemIndex].status = status updatedChecklist.sections[sectionIndex].items[itemIndex].value = value updatedChecklist.sections[sectionIndex].items[itemIndex].notes = notes setChecklist(updatedChecklist) // Recalculate progress const sectionTotalItems = updatedChecklist.sections[sectionIndex].items.length const sectionCompletedItems = updatedChecklist.sections[sectionIndex].items.filter( (item) => item.status === "passed" || item.status === "failed" || item.status === "na" || item.status === "skipped", ).length const updatedSectionsProgress = [...progress.sectionsProgress] updatedSectionsProgress[sectionIndex] = { ...updatedSectionsProgress[sectionIndex], completedItems: sectionCompletedItems, progress: (sectionCompletedItems / sectionTotalItems) * 100, } const totalCompletedItems = updatedSectionsProgress.reduce( (total, section) => total + section.completedItems, 0, ) setProgress({ ...progress, completedItems: totalCompletedItems, progress: (totalCompletedItems / progress.totalItems) * 100, sectionsProgress: updatedSectionsProgress, }) } } } catch (error) { console.error("Failed to complete item:", error) } } const handleSignature = async (role: string, name: string, signature: string) => { if (!checklist) return try { await addSignature(checklistId, { role, name, signature }) } catch (error) { console.error("Failed to add signature:", error) } } const handleCompleteChecklist = async () => { if (!checklist) return try { await completeChecklist(checklistId) onComplete?.() } catch (error) { console.error("Failed to complete checklist:", error) } } const handleSave = () => { onSave?.() } const getStatusBadgeColor = (status: ChecklistStatus) => { switch (status) { case ChecklistStatus.NOT_STARTED: return "bg-gray-500" case ChecklistStatus.IN_PROGRESS: return "bg-blue-500" case ChecklistStatus.COMPLETED: return "bg-green-500" case ChecklistStatus.REQUIRES_ATTENTION: return "bg-yellow-500" case ChecklistStatus.SKIPPED: return "bg-red-500" default: return "bg-gray-500" } } const getItemStatusIcon = (status: string) => { switch (status) { case "passed": return case "failed": return case "na": return case "skipped": return default: return null } } if (loading) { return

Carregando...

} if (error) { return

Erro: {error}

} if (!checklist) { return

Checklist não encontrado

} return (

{checklist.name} {checklist.description || "Sem descrição"}

{checklist.status}

Progresso Geral: {progress.completedItems} de {progress.totalItems} itens ( {Math.round(progress.progress)}%)

Checklist Assinaturas setActiveSection(value)} className="w-full" > {checklist.sections.map((section, sectionIndex) => (

{section.title} {section.items.length} itens

{Math.round(progress.sectionsProgress[sectionIndex]?.progress || 0)}%

{section.description &&

{section.description}

}

{section.items.map((item) => (

{getItemStatusIcon(item.status)}

{item.description}

{item.required && ( Obrigatório )}

{item.type === "checkbox" && (

{ handleItemComplete( section.id, item.id, checked, checked ? "passed" : "pending", item.notes, ) }} /> Conforme

)} {item.type === "text" && (

Resposta { handleItemComplete( section.id, item.id, e.target.value, e.target.value ? "passed" : "pending", item.notes, ) }} placeholder="Digite sua resposta" />

)} {item.type === "number" && (

Valor { handleItemComplete( section.id, item.id, e.target.value, e.target.value ? "passed" : "pending", item.notes, ) }} placeholder="Digite um valor numérico" />

)} {item.type === "select" && item.options && (

Selecione uma opção

)} {item.type === "photo" && (

Foto

{item.photos && item.photos.length > 0 && (

{item.photos.map((photo, index) => (

))}

)}

Observações

{
                                handleItemComplete(section.id, item.id, item.value, item.status as any, e.target.value)
                              }}
                              placeholder="Adicione observações se necessário"
                            />
                          </div>

<div className="pt-2">
                            <RadioGroup
                              value={item.status}
                              onValueChange={(value) => {
                                handleItemComplete(section.id, item.id, item.value, value as any, item.notes)
                              }}
                              className="flex space-x-2"
                            >
                              <div className="flex items-center space-x-1">
                                <RadioGroupItem value="passed" id={`passed-${item.id}`} />
                                <Label htmlFor={`passed-${item.id}`} className="text-green-600">
                                  Aprovado
                                </Label>
                              </div>
                              <div className="flex items-center space-x-1">
                                <RadioGroupItem value="failed" id={`failed-${item.id}`} />
                                <Label htmlFor={`failed-${item.id}`} className="text-red-600">
                                  Reprovado
                                </Label>
                              </div>
                              <div className="flex items-center space-x-1">
                                <RadioGroupItem value="na" id={`na-${item.id}`} />
                                <Label htmlFor={`na-${item.id}`} className="text-gray-600">
                                  N/A
                                </Label>
                              </div>
                              <div className="flex items-center space-x-1">
                                <RadioGroupItem value="skipped" id={`skipped-${item.id}`} />
                                <Label htmlFor={`skipped-${item.id}`} className="text-yellow-600">
                                  Ignorado
                                </Label>
                              </div>
                            </RadioGroup>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </TabsContent>

<TabsContent value="signatures" className="space-y-4 mt-4">
          <Card>
            <CardHeader>
              <CardTitle>Assinaturas Requeridas</CardTitle>
              <CardDescription>As seguintes assinaturas são necessárias para completar este checklist</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
                {checklist.requiredSignatures.map((requiredSignature, index) => {
                  const existingSignature = checklist.signatures?.find((s) => s.role === requiredSignature.role)

return (
                    <div key={index} className="border rounded-md p-4">
                      <h3 className="font-medium mb-2">
                        {requiredSignature.role} {requiredSignature.required && <span className="text-red-500">*</span>}
                      </h3>
                      <p className="text-sm text-gray-500 mb-4">{requiredSignature.description}</p>

{existingSignature ? (
                        <div className="space-y-2">
                          <div className="flex items-center gap-2">
                            <CheckCircle2 className="h-5 w-5 text-green-500" />
                            <span className="font-medium">Assinado por {existingSignature.name}</span>
                          </div>
                          <div className="text-sm text-gray-500">Data: {formatDate(existingSignature.date)}</div>
                          <div className="border rounded-md p-2 bg-gray-50">
                            <img
                              src={existingSignature.signature || "/placeholder.svg"}
                              alt="Assinatura"
                              className="max-h-20"
                            />
                          </div>
                          {existingSignature.notes && (
                            <div className="text-sm">
                              <span className="font-medium">Observações:</span> {existingSignature.notes}
                            </div>
                          )}
                        </div>
                      ) : (
                        <ChecklistSignaturePad role={requiredSignature.role} onSign={handleSignature} />
                      )}
                    </div>
                  )
                })}
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

<Card>
        <CardFooter className="flex justify-between pt-6">
          <Button variant="outline" onClick={handleSave}>
            <Save className="h-4 w-4 mr-1" />
            Salvar
          </Button>
          <Button onClick={handleCompleteChecklist} disabled={progress.progress < 100}>
            <CheckSquare className="h-4 w-4 mr-1" />
            Concluir Checklist
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/checklists/checklist-signature-pad.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Eraser, Save } from "lucide-react"

interface ChecklistSignaturePadProps {
  role: string
  onSign: (role: string, name: string, signature: string, notes?: string) => void
}

export function ChecklistSignaturePad({ role, onSign }: ChecklistSignaturePadProps) {
  const [name, setName] = useState("")
  const [notes, setNotes] = useState("")
  const [isDrawing, setIsDrawing] = useState(false)
  const [hasSignature, setHasSignature] = useState(false)

const canvasRef = useRef<HTMLCanvasElement>(null)
  const contextRef = useRef<CanvasRenderingContext2D | null>(null)

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

// Set canvas dimensions
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    canvas.style.width = `${canvas.offsetWidth}px`
    canvas.style.height = `${canvas.offsetHeight}px`

// Get context
    const context = canvas.getContext("2d")
    if (!context) return

context.scale(2, 2)
    context.lineCap = "round"
    context.strokeStyle = "black"
    context.lineWidth = 2
    contextRef.current = context

// Clear canvas
    context.fillStyle = "white"
    context.fillRect(0, 0, canvas.width, canvas.height)
  }, [])

const startDrawing = ({ nativeEvent }: React.MouseEvent<HTMLCanvasElement>) => {
    const { offsetX, offsetY } = nativeEvent
    if (contextRef.current) {
      contextRef.current.beginPath()
      contextRef.current.moveTo(offsetX, offsetY)
      setIsDrawing(true)
    }
  }

const finishDrawing = () => {
    if (contextRef.current) {
      contextRef.current.closePath()
      setIsDrawing(false)
      setHasSignature(true)
    }
  }

const draw = ({ nativeEvent }: React.MouseEvent<HTMLCanvasElement>) => {
    if (!isDrawing || !contextRef.current) return

const { offsetX, offsetY } = nativeEvent
    contextRef.current.lineTo(offsetX, offsetY)
    contextRef.current.stroke()
  }

const clearCanvas = () => {
    const canvas = canvasRef.current
    const context = contextRef.current

if (canvas && context) {
      context.fillStyle = "white"
      context.fillRect(0, 0, canvas.width, canvas.height)
      setHasSignature(false)
    }
  }

const saveSignature = () => {
    if (!name || !hasSignature) return

const canvas = canvasRef.current
    if (canvas) {
      const signatureDataUrl = canvas.toDataURL("image/png")
      onSign(role, name, signatureDataUrl, notes)
    }
  }

return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor={`name-${role}`}>Nome Completo</Label>
        <Input
          id={`name-${role}`}
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Digite seu nome completo"
          required
        />
      </div>

<div className="space-y-2">
        <Label>Assinatura</Label>
        <div className="border rounded-md bg-white">
          <canvas
            ref={canvasRef}
            onMouseDown={startDrawing}
            onMouseUp={finishDrawing}
            onMouseMove={draw}
            className="w-full h-32 cursor-crosshair"
          />
        </div>
        <div className="flex gap-2">
          <Button variant="outline" type="button" onClick={clearCanvas}>
            <Eraser className="h-4 w-4 mr-1" />
            Limpar
          </Button>
        </div>
      </div>

<div className="space-y-2">
        <Label htmlFor={`notes-${role}`}>Observações (opcional)</Label>
        <Textarea
          id={`notes-${role}`}
          value={notes}
          onChange={(e) => setNotes(e.target.value)}
          placeholder="Adicione observações se necessário"
        />
      </div>

<Button onClick={saveSignature} disabled={!name || !hasSignature} className="w-full">
        <Save className="h-4 w-4 mr-1" />
        Salvar Assinatura
      </Button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/checklists/checklist-progress.tsx"
"use client"

import { useState, useEffect } from "react"
import { ChecklistService } from "../../services/checklist-service"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Badge } from "@/components/ui/badge"
import { CheckSquare, AlertTriangle, CheckCircle2, XCircle, HelpCircle } from "lucide-react"

interface ChecklistProgressProps {
  checklistId: string
}

export function ChecklistProgress({ checklistId }: ChecklistProgressProps) {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [progress, setProgress] = useState<{
    totalItems: number
    completedItems: number
    progress: number
    sectionsProgress: {
      sectionId: string
      sectionTitle: string
      totalItems: number
      completedItems: number
      progress: number
    }[]
  }>({
    totalItems: 0,
    completedItems: 0,
    progress: 0,
    sectionsProgress: [],
  })

useEffect(() => {
    const fetchProgress = async () => {
      setLoading(true)
      try {
        const checklistService = new ChecklistService()
        const progressData = await checklistService.getChecklistProgress(checklistId)
        setProgress(progressData)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to fetch checklist progress")
      } finally {
        setLoading(false)
      }
    }

fetchProgress()
  }, [checklistId])

if (loading) {
    return <div className="flex justify-center py-8">Carregando...</div>
  }

if (error) {
    return <div className="text-red-500">Erro: {error}</div>
  }

return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center">
          <CheckSquare className="h-5 w-5 mr-2" />
          Progresso do Checklist
        </CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <div className="text-sm font-medium">Progresso Geral</div>
              <div className="text-sm font-medium">{Math.round(progress.progress)}%</div>
            </div>
            <Progress value={progress.progress} className="h-2" />
            <div className="flex justify-between text-xs text-gray-500">
              <div>
                {progress.completedItems} de {progress.totalItems} itens concluídos
              </div>
              <div className="flex items-center gap-4">
                <div className="flex items-center">
                  <CheckCircle2 className="h-3 w-3 text-green-500 mr-1" />
                  <span>Aprovados</span>
                </div>
                <div className="flex items-center">
                  <XCircle className="h-3 w-3 text-red-500 mr-1" />
                  <span>Reprovados</span>
                </div>
                <div className="flex items-center">
                  <HelpCircle className="h-3 w-3 text-gray-500 mr-1" />
                  <span>N/A</span>
                </div>
              </div>
            </div>
          </div>

<div className="space-y-4">
            <h3 className="text-sm font-medium">Progresso por Seção</h3>
            {progress.sectionsProgress.map((section) => (
              <div key={section.sectionId} className="space-y-2">
                <div className="flex justify-between items-center">
                  <div className="text-sm">{section.sectionTitle}</div>
                  <div className="flex items-center gap-2">
                    <Badge variant="outline">
                      {section.completedItems}/{section.totalItems}
                    </Badge>
                    <div className="text-sm">{Math.round(section.progress)}%</div>
                  </div>
                </div>
                <Progress value={section.progress} className="h-1.5" />
              </div>
            ))}
          </div>

{progress.progress < 100 && (
            <div className="flex items-center p-3 bg-yellow-50 border border-yellow-200 rounded-md">
              <AlertTriangle className="h-5 w-5 text-yellow-500 mr-2" />
              <div className="text-sm text-yellow-700">
                Existem itens pendentes que precisam ser concluídos antes de finalizar o checklist.
              </div>
            </div>
          )}

{progress.progress === 100 && (
            <div className="flex items-center p-3 bg-green-50 border border-green-200 rounded-md">
              <CheckCircle2 className="h-5 w-5 text-green-500 mr-2" />
              <div className="text-sm text-green-700">Todos os itens do checklist foram concluídos.</div>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/api/installation/checklists/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { ChecklistService } from "@/modules/installation/services/checklist-service"

const checklistService = new ChecklistService()

export async function GET(request: NextRequest) {
  try {
    // Parse query parameters for filtering
    const searchParams = request.nextUrl.searchParams
    const type = searchParams.get("type")
    const category = searchParams.get("category")
    const status = searchParams.get("status")
    const projectId = searchParams.get("projectId")
    const search = searchParams.get("search")
    const startDate = searchParams.get("startDate")
    const endDate = searchParams.get("endDate")

// Build filter object
    const filter: any = {}
    if (type) filter.type = type
    if (category) filter.category = category
    if (status) filter.status = status
    if (projectId) filter.projectId = projectId
    if (search) filter.search = search

if (startDate && endDate) {
      filter.dateRange = {
        start: new Date(startDate),
        end: new Date(endDate),
      }
    }

const checklists = await checklistService.getChecklists(filter)
    return NextResponse.json(checklists)
  } catch (error) {
    console.error("Error fetching checklists:", error)
    return NextResponse.json({ error: "Failed to fetch checklists" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const checklistData = await request.json()
    const newChecklist = await checklistService.createChecklist(checklistData)
    return NextResponse.json(newChecklist, { status: 201 })
  } catch (error) {
    console.error("Error creating checklist:", error)
    return NextResponse.json({ error: "Failed to create checklist" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/checklists/[id]/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { ChecklistService } from "@/modules/installation/services/checklist-service"

const checklistService = new ChecklistService()

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const checklist = await checklistService.getChecklistById(params.id)

if (!checklist) {
      return NextResponse.json({ error: "Checklist not found" }, { status: 404 })
    }

return NextResponse.json(checklist)
  } catch (error) {
    console.error("Error fetching checklist:", error)
    return NextResponse.json({ error: "Failed to fetch checklist" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const checklistData = await request.json()
    const updatedChecklist = await checklistService.updateChecklist(params.id, checklistData)

return NextResponse.json(updatedChecklist)
  } catch (error) {
    console.error("Error updating checklist:", error)
    return NextResponse.json({ error: "Failed to update checklist" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const success = await checklistService.deleteChecklist(params.id)

if (!success) {
      return NextResponse.json({ error: "Failed to delete checklist" }, { status: 400 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting checklist:", error)
    return NextResponse.json({ error: "Failed to delete checklist" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/checklists/[id]/complete/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { ChecklistService } from "@/modules/installation/services/checklist-service"

const checklistService = new ChecklistService()

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const completedChecklist = await checklistService.completeChecklist(params.id)
    return NextResponse.json(completedChecklist)
  } catch (error) {
    console.error("Error completing checklist:", error)
    return NextResponse.json({ error: "Failed to complete checklist" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/checklists/[id]/items/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { ChecklistService } from "@/modules/installation/services/checklist-service"

const checklistService = new ChecklistService()

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const { sectionId, item } = await request.json()

if (!sectionId || !item) {
      return NextResponse.json({ error: "Section ID and item data are required" }, { status: 400 })
    }

const newItem = await checklistService.addItem(params.id, sectionId, item)
    return NextResponse.json(newItem, { status: 201 })
  } catch (error) {
    console.error("Error adding checklist item:", error)
    return NextResponse.json({ error: "Failed to add checklist item" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/checklists/[id]/items/[itemId]/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { ChecklistService } from "@/modules/installation/services/checklist-service"

const checklistService = new ChecklistService()

export async function PUT(request: NextRequest, { params }: { params: { id: string; itemId: string } }) {
  try {
    const { sectionId, value, status, notes, photos } = await request.json()

if (!sectionId) {
      return NextResponse.json({ error: "Section ID is required" }, { status: 400 })
    }

const updatedItem = await checklistService.completeItem(params.id, sectionId, params.itemId, value, notes, photos)

return NextResponse.json(updatedItem)
  } catch (error) {
    console.error("Error updating checklist item:", error)
    return NextResponse.json({ error: "Failed to update checklist item" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string; itemId: string } }) {
  try {
    const { sectionId } = await request.json()

if (!sectionId) {
      return NextResponse.json({ error: "Section ID is required" }, { status: 400 })
    }

const success = await checklistService.deleteItem(params.id, sectionId, params.itemId)

if (!success) {
      return NextResponse.json({ error: "Failed to delete checklist item" }, { status: 400 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting checklist item:", error)
    return NextResponse.json({ error: "Failed to delete checklist item" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/installation/checklists/page.tsx"
import { InstallationProvider } from "@/modules/installation/contexts/installation-context"
import { ChecklistList } from "@/modules/installation/components/checklists/checklist-list"

export default function ChecklistsPage() {
  return (
    <InstallationProvider>
      <div className="container mx-auto py-6">
        <h1 className="text-3xl font-bold mb-6">Checklists de Instalação</h1>
        <ChecklistList />
      </div>
    </InstallationProvider>
  )
}
[V0_FILE]typescriptreact:file="app/installation/checklists/templates/page.tsx"
import { InstallationProvider } from "@/modules/installation/contexts/installation-context"
import { ChecklistList } from "@/modules/installation/components/checklists/checklist-list"

export default function ChecklistTemplatesPage() {
  return (
    <InstallationProvider>
      <div className="container mx-auto py-6">
        <h1 className="text-3xl font-bold mb-6">Modelos de Checklist</h1>
        <ChecklistList isTemplate={true} />
      </div>
    </InstallationProvider>
  )
}
[V0_FILE]typescriptreact:file="app/installation/checklists/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { InstallationProvider } from "@/modules/installation/contexts/installation-context"
import { ChecklistService } from "@/modules/installation/services/checklist-service"
import { ChecklistExecution } from "@/modules/installation/components/checklists/checklist-execution"
import { ChecklistProgress } from "@/modules/installation/components/checklists/checklist-progress"
import { Button } from "@/components/ui/button"
import { ArrowLeft, Save, FileText } from "lucide-react"
import { useRouter } from "next/navigation"

export default function ChecklistDetailPage() {
  const params = useParams()
  const router = useRouter()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [checklistName, setChecklistName] = useState("")

const checklistId = params.id as string

useEffect(() => {
    const fetchChecklistName = async () => {
      try {
        const checklistService = new ChecklistService()
        const checklist = await checklistService.getChecklistById(checklistId)
        if (checklist) {
          setChecklistName(checklist.name)
        }
      } catch (err) {
        setError(err instanceof Error ? err.message : "Failed to fetch checklist")
      } finally {
        setLoading(false)
      }
    }

fetchChecklistName()
  }, [checklistId])

const handleBack = () => {
    router.back()
  }

const handleSave = () => {
    // Save functionality would be handled by the ChecklistExecution component
    console.log("Checklist saved")
  }

const handleComplete = () => {
    router.push("/installation/checklists")
  }

if (loading) {
    return (
      <InstallationProvider>
        <div className="container mx-auto py-6">
          <div className="flex justify-center py-8">Carregando...</div>
        </div>
      </InstallationProvider>
    )
  }

if (error) {
    return (
      <InstallationProvider>
        <div className="container mx-auto py-6">
          <div className="text-red-500">Erro: {error}</div>
        </div>
      </InstallationProvider>
    )
  }

return (
    <InstallationProvider>
      <div className="container mx-auto py-6">
        <div className="flex justify-between items-center mb-6">
          <div className="flex items-center gap-2">
            <Button variant="outline" size="icon" onClick={handleBack}>
              <ArrowLeft className="h-4 w-4" />
            </Button>
            <h1 className="text-3xl font-bold">{checklistName}</h1>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" onClick={handleSave}>
              <Save className="h-4 w-4 mr-1" />
              Salvar
            </Button>
            <Button variant="outline">
              <FileText className="h-4 w-4 mr-1" />
              Exportar PDF
            </Button>
          </div>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="md:col-span-2">
            <ChecklistExecution checklistId={checklistId} onComplete={handleComplete} onSave={handleSave} />
          </div>
          <div>
            <ChecklistProgress checklistId={checklistId} />
          </div>
        </div>
      </div>
    </InstallationProvider>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/services/index.ts"
export * from "./installation-project-service"
export * from "./schedule-service"
export * from "./team-service"
export * from "./equipment-service"
export * from "./inspection-service"
export * from "./checklist-service"
export * from "./document-service"
export * from "./notification-service"
export * from "./task-service"
export * from "./progress-service"
export * from "./report-service"
export * from "./analytics-service"
[V0_FILE]typescriptreact:file="modules/installation/services/notification-service.ts"
import {
  type Notification,
  NotificationType,
  NotificationCategory,
  NotificationPriority,
  NotificationStatus,
  type NotificationFilter,
  type Recipient,
} from "../types/notification"

export class NotificationService {
  private apiUrl = "/api/installation/notifications"

async getNotifications(filter?: NotificationFilter): Promise<Notification[]> {
    try {
      const queryParams = new URLSearchParams()

if (filter) {
        if (filter.type?.length) queryParams.set("type", filter.type.join(","))
        if (filter.category?.length) queryParams.set("category", filter.category.join(","))
        if (filter.priority?.length) queryParams.set("priority", filter.priority.join(","))
        if (filter.status?.length) queryParams.set("status", filter.status.join(","))
        if (filter.projectId) queryParams.set("projectId", filter.projectId)
        if (filter.recipientId) queryParams.set("recipientId", filter.recipientId)
        if (filter.search) queryParams.set("search", filter.search)
        if (filter.unreadOnly) queryParams.set("unreadOnly", "true")

if (filter.dateRange) {
          queryParams.set("startDate", filter.dateRange.start.toISOString())
          queryParams.set("endDate", filter.dateRange.end.toISOString())
        }
      }

const url = `${this.apiUrl}?${queryParams.toString()}`
      const response = await fetch(url)

if (!response.ok) {
        throw new Error(`Failed to fetch notifications: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error("Error fetching notifications:", error)
      throw error
    }
  }

async getNotification(id: string): Promise<Notification> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}`)

if (!response.ok) {
        throw new Error(`Failed to fetch notification: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error(`Error fetching notification ${id}:`, error)
      throw error
    }
  }

async createNotification(notification: Omit<Notification, "id" | "createdAt">): Promise<Notification> {
    try {
      const response = await fetch(this.apiUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(notification),
      })

if (!response.ok) {
        throw new Error(`Failed to create notification: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error("Error creating notification:", error)
      throw error
    }
  }

async updateNotification(id: string, updates: Partial<Notification>): Promise<Notification> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updates),
      })

if (!response.ok) {
        throw new Error(`Failed to update notification: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error(`Error updating notification ${id}:`, error)
      throw error
    }
  }

async deleteNotification(id: string): Promise<void> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}`, {
        method: "DELETE",
      })

if (!response.ok) {
        throw new Error(`Failed to delete notification: ${response.statusText}`)
      }
    } catch (error) {
      console.error(`Error deleting notification ${id}:`, error)
      throw error
    }
  }

async markAsRead(id: string, userId: string): Promise<Notification> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}/read`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ userId }),
      })

if (!response.ok) {
        throw new Error(`Failed to mark notification as read: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error(`Error marking notification ${id} as read:`, error)
      throw error
    }
  }

async markAllAsRead(userId: string, filter?: NotificationFilter): Promise<void> {
    try {
      const queryParams = new URLSearchParams()

const url = `${this.apiUrl}/read-all?${queryParams.toString()}`
      const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ userId }),
      })

if (!response.ok) {
        throw new Error(`Failed to mark all notifications as read: ${response.statusText}`)
      }
    } catch (error) {
      console.error("Error marking all notifications as read:", error)
      throw error
    }
  }

async sendNotification(id: string): Promise<Notification> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}/send`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error(`Failed to send notification: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error(`Error sending notification ${id}:`, error)
      throw error
    }
  }

async cancelScheduledNotification(id: string): Promise<Notification> {
    try {
      const response = await fetch(`${this.apiUrl}/${id}/cancel`, {
        method: "POST",
      })

if (!response.ok) {
        throw new Error(`Failed to cancel scheduled notification: ${response.statusText}`)
      }

return await response.json()
    } catch (error) {
      console.error(`Error canceling scheduled notification ${id}:`, error)
      throw error
    }
  }

// Helper methods for creating common notification types
  createProjectUpdateNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.MEDIUM,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.PROJECT_UPDATE,
      category: NotificationCategory.INFO,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }

createScheduleChangeNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.HIGH,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.SCHEDULE_CHANGE,
      category: NotificationCategory.WARNING,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }

createTaskAssignmentNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.MEDIUM,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.TASK_ASSIGNMENT,
      category: NotificationCategory.ACTION_REQUIRED,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }

createInspectionReminderNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    scheduledAt: Date,
    priority: NotificationPriority = NotificationPriority.MEDIUM,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.INSPECTION_REMINDER,
      category: NotificationCategory.INFO,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SCHEDULED,
      scheduledAt,
      metadata,
    })
  }

createEquipmentIssueNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.HIGH,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.EQUIPMENT_ISSUE,
      category: NotificationCategory.ALERT,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }

createSafetyAlertNotification(
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.URGENT,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      type: NotificationType.SAFETY_ALERT,
      category: NotificationCategory.ALERT,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }

createWeatherAlertNotification(
    projectId: string,
    title: string,
    message: string,
    recipients: Recipient[],
    priority: NotificationPriority = NotificationPriority.HIGH,
    metadata?: Record<string, any>,
  ): Promise<Notification> {
    return this.createNotification({
      projectId,
      type: NotificationType.WEATHER_ALERT,
      category: NotificationCategory.WARNING,
      priority,
      title,
      message,
      recipients,
      status: NotificationStatus.SENT,
      metadata,
    })
  }
}
[V0_FILE]typescriptreact:file="modules/installation/hooks/use-notifications.ts"
"use client"

import { useState, useEffect, useCallback } from "react"
import type { Notification, NotificationFilter } from "../types/notification"
import { NotificationService } from "../services/notification-service"

interface UseNotificationsOptions {
  initialFilter?: NotificationFilter
  autoRefresh?: boolean
  refreshInterval?: number
  userId: string
}

export function useNotifications({
  initialFilter,
  autoRefresh = false,
  refreshInterval = 60000, // 1 minute
  userId,
}: UseNotificationsOptions) {
  const [notifications, setNotifications] = useState<Notification[]>([])
  const [filter, setFilter] = useState<NotificationFilter | undefined>(initialFilter)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<Error | null>(null)
  const [unreadCount, setUnreadCount] = useState(0)

const notificationService = new NotificationService()

const fetchNotifications = useCallback(async () => {
    setIsLoading(true)
    setError(null)

try {
      const fetchedNotifications = await notificationService.getNotifications(filter)
      setNotifications(fetchedNotifications)

// Calculate unread count
      const unread = fetchedNotifications.filter(
        (notification) => !notification.readBy?.some((reader) => reader.userId === userId),
      ).length

setUnreadCount(unread)
    } catch (err) {
      setError(err instanceof Error ? err : new Error("Failed to fetch notifications"))
    } finally {
      setIsLoading(false)
    }
  }, [filter, notificationService, userId])

const markAsRead = useCallback(
    async (notificationId: string) => {
      try {
        await notificationService.markAsRead(notificationId, userId)

// Update local state
        setNotifications((prev) =>
          prev.map((notification) => {
            if (notification.id === notificationId) {
              const readBy = notification.readBy || []
              if (!readBy.some((reader) => reader.userId === userId)) {
                return {
                  ...notification,
                  readBy: [...readBy, { userId, readAt: new Date() }],
                }
              }
            }
            return notification
          }),
        )

// Update unread count
        setUnreadCount((prev) => Math.max(0, prev - 1))
      } catch (err) {
        console.error(`Error marking notification ${notificationId} as read:`, err)
        throw err
      }
    },
    [notificationService, userId],
  )

const markAllAsRead = useCallback(async () => {
    try {
      await notificationService.markAllAsRead(userId, filter)

// Update local state
      setNotifications((prev) =>
        prev.map((notification) => {
          const readBy = notification.readBy || []
          if (!readBy.some((reader) => reader.userId === userId)) {
            return {
              ...notification,
              readBy: [...readBy, { userId, readAt: new Date() }],
            }
          }
          return notification
        }),
      )

// Reset unread count
      setUnreadCount(0)
    } catch (err) {
      console.error("Error marking all notifications as read:", err)
      throw err
    }
  }, [notificationService, userId, filter])

const deleteNotification = useCallback(
    async (notificationId: string) => {
      try {
        await notificationService.deleteNotification(notificationId)

// Update local state
        setNotifications((prev) => prev.filter((notification) => notification.id !== notificationId))

// Update unread count if needed
        const wasUnread = notifications.find(
          (n) => n.id === notificationId && !n.readBy?.some((reader) => reader.userId === userId),
        )

if (wasUnread) {
          setUnreadCount((prev) => Math.max(0, prev - 1))
        }
      } catch (err) {
        console.error(`Error deleting notification ${notificationId}:`, err)
        throw err
      }
    },
    [notificationService, notifications, userId],
  )

const updateFilter = useCallback((newFilter: NotificationFilter) => {
    setFilter(newFilter)
  }, [])

// Initial fetch
  useEffect(() => {
    fetchNotifications()
  }, [fetchNotifications])

// Auto refresh if enabled
  useEffect(() => {
    if (!autoRefresh) return

const intervalId = setInterval(() => {
      fetchNotifications()
    }, refreshInterval)

return () => clearInterval(intervalId)
  }, [autoRefresh, refreshInterval, fetchNotifications])

return {
    notifications,
    unreadCount,
    isLoading,
    error,
    filter,
    updateFilter,
    fetchNotifications,
    markAsRead,
    markAllAsRead,
    deleteNotification,
    notificationService,
  }
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/index.ts"
export * from "./notification-center"
export * from "./notification-item"
export * from "./notification-badge"
export * from "./notification-filter"
export * from "./notification-preferences"
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-center.tsx"
"use client"

import { useState } from "react"
import { Bell, Check, X, Filter, Settings, ChevronLeft, ChevronRight } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { useNotifications } from "../../hooks/use-notifications"
import { NotificationItem } from "./notification-item"
import { NotificationFilter } from "./notification-filter"
import { NotificationBadge } from "./notification-badge"
import { NotificationPreferences } from "./notification-preferences"
import { NotificationCategory } from "../../types/notification"

interface NotificationCenterProps {
  userId: string
}

export function NotificationCenter({ userId }: NotificationCenterProps) {
  const [isOpen, setIsOpen] = useState(false)
  const [showFilters, setShowFilters] = useState(false)
  const [showPreferences, setShowPreferences] = useState(false)
  const [activeTab, setActiveTab] = useState("all")
  const [currentPage, setCurrentPage] = useState(1)
  const itemsPerPage = 10

const {
    notifications,
    unreadCount,
    isLoading,
    error,
    filter,
    updateFilter,
    fetchNotifications,
    markAsRead,
    markAllAsRead,
    deleteNotification,
  } = useNotifications({
    userId,
    autoRefresh: true,
    refreshInterval: 30000, // 30 seconds
    initialFilter: {
      unreadOnly: false,
    },
  })

const handleMarkAllAsRead = async () => {
    await markAllAsRead()
  }

const handleTabChange = (value: string) => {
    setActiveTab(value)
    setCurrentPage(1)

if (value === "unread") {
      updateFilter({ ...filter, unreadOnly: true })
    } else if (value === "alerts") {
      updateFilter({
        ...filter,
        unreadOnly: false,
        category: [NotificationCategory.ALERT, NotificationCategory.WARNING],
      })
    } else if (value === "actions") {
      updateFilter({
        ...filter,
        unreadOnly: false,
        category: [NotificationCategory.ACTION_REQUIRED],
      })
    } else {
      updateFilter({ ...filter, unreadOnly: false, category: undefined })
    }
  }

// Filter notifications based on active tab
  const filteredNotifications = notifications

// Pagination
  const totalPages = Math.ceil(filteredNotifications.length / itemsPerPage)
  const paginatedNotifications = filteredNotifications.slice(
    (currentPage - 1) * itemsPerPage,
    currentPage * itemsPerPage,
  )

const handleNextPage = () => {
    if (currentPage < totalPages) {
      setCurrentPage(currentPage + 1)
    }
  }

const handlePrevPage = () => {
    if (currentPage > 1) {
      setCurrentPage(currentPage - 1)
    }
  }

return (
    <>
      <SheetTrigger asChild>
        <Button variant="ghost" size="icon" className="relative" onClick={() => setIsOpen(true)}>
          <Bell className="h-5 w-5" />
          {unreadCount > 0 && <NotificationBadge count={unreadCount} />}
        </Button>
      </SheetTrigger>
      <Sheet open={isOpen} onOpenChange={setIsOpen}>
        <SheetContent className="w-full sm:max-w-md p-0 flex flex-col">
          <SheetHeader className="p-4 border-b">
            <div className="flex items-center justify-between">
              <SheetTitle>Notificações</SheetTitle>
              <div className="flex items-center space-x-2">
                {unreadCount > 0 && (
                  <Button variant="ghost" size="sm" onClick={handleMarkAllAsRead} title="Marcar todas como lidas">
                    <Check className="h-4 w-4 mr-1" />
                    <span className="sr-only sm:not-sr-only sm:inline-block">Marcar todas</span>
                  </Button>
                )}
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => {
                    setShowFilters(true)
                    setShowPreferences(false)
                  }}
                  title="Filtrar notificações"
                >
                  <Filter className="h-4 w-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  onClick={() => {
                    setShowPreferences(true)
                    setShowFilters(false)
                  }}
                  title="Preferências de notificação"
                >
                  <Settings className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </SheetHeader>

{showFilters ? (
            <div className="flex-1 overflow-hidden">
              <div className="p-4 border-b">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium">Filtros</h3>
                  <Button variant="ghost" size="icon" onClick={() => setShowFilters(false)}>
                    <X className="h-4 w-4" />
                  </Button>
                </div>
                <NotificationFilter
                  currentFilter={filter}
                  onFilterChange={(newFilter) => {
                    updateFilter(newFilter)
                    setCurrentPage(1)
                  }}
                />
              </div>
            </div>
          ) : showPreferences ? (
            <div className="flex-1 overflow-hidden">
              <div className="p-4 border-b">
                <div className="flex items-center justify-between mb-4">
                  <h3 className="text-lg font-medium">Preferências</h3>
                  <Button variant="ghost" size="icon" onClick={() => setShowPreferences(false)}>
                    <X className="h-4 w-4" />
                  </Button>
                </div>
                <NotificationPreferences userId={userId} />
              </div>
            </div>
          ) : (
            <>
              <Tabs
                defaultValue="all"
                value={activeTab}
                onValueChange={handleTabChange}
                className="flex-1 flex flex-col"
              >
                <div className="border-b">
                  <TabsList className="w-full justify-start px-4 py-2 h-auto bg-transparent">
                    <TabsTrigger value="all" className="data-[state=active]:bg-secondary">
                      Todas
                    </TabsTrigger>
                    <TabsTrigger value="unread" className="data-[state=active]:bg-secondary">
                      Não lidas {unreadCount > 0 && `(${unreadCount})`}
                    </TabsTrigger>
                    <TabsTrigger value="alerts" className="data-[state=active]:bg-secondary">
                      Alertas
                    </TabsTrigger>
                    <TabsTrigger value="actions" className="data-[state=active]:bg-secondary">
                      Ações
                    </TabsTrigger>
                  </TabsList>
                </div>

{totalPages > 1 && (
                <div className="flex items-center justify-between p-4 border-t">
                  <Button variant="outline" size="sm" onClick={handlePrevPage} disabled={currentPage === 1}>
                    <ChevronLeft className="h-4 w-4 mr-1" />
                    Anterior
                  </Button>
                  <span className="text-sm text-muted-foreground">
                    Página {currentPage} de {totalPages}
                  </span>
                  <Button variant="outline" size="sm" onClick={handleNextPage} disabled={currentPage === totalPages}>
                    Próxima
                    <ChevronRight className="h-4 w-4 ml-1" />
                  </Button>
                </div>
              )}
            </>
          )}
        </SheetContent>
      </Sheet>
    </>
  )
}

interface NotificationListProps {
  notifications: Notification[]
  isLoading: boolean
  error: Error | null
  onMarkAsRead: (id: string) => Promise<void>
  onDelete: (id: string) => Promise<void>
  userId: string
}

function NotificationList({ notifications, isLoading, error, onMarkAsRead, onDelete, userId }: NotificationListProps) {
  if (isLoading && notifications.length === 0) {
    return (
      <div className="flex items-center justify-center h-full p-8">
        <p className="text-muted-foreground">Carregando notificações...</p>
      </div>
    )
  }

if (error) {
    return (
      <div className="flex items-center justify-center h-full p-8">
        <p className="text-destructive">Erro ao carregar notificações: {error.message}</p>
      </div>
    )
  }

if (notifications.length === 0) {
    return (
      <div className="flex items-center justify-center h-full p-8">
        <p className="text-muted-foreground">Nenhuma notificação encontrada</p>
      </div>
    )
  }

return (
    <ScrollArea className="h-full">
      <div className="divide-y">
        {notifications.map((notification) => (
          <NotificationItem
            key={notification.id}
            notification={notification}
            onMarkAsRead={onMarkAsRead}
            onDelete={onDelete}
            isRead={notification.readBy?.some((reader) => reader.userId === userId) || false}
          />
        ))}
      </div>
    </ScrollArea>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-item.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import {
  Calendar,
  AlertTriangle,
  CheckCircle2,
  Info,
  AlertCircle,
  MoreVertical,
  Check,
  Trash2,
  ExternalLink,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { type Notification, NotificationCategory } from "../../types/notification"

interface NotificationItemProps {
  notification: Notification
  isRead: boolean
  onMarkAsRead: (id: string) => Promise<void>
  onDelete: (id: string) => Promise<void>
}

export function NotificationItem({ notification, isRead, onMarkAsRead, onDelete }: NotificationItemProps) {
  const [isExpanded, setIsExpanded] = useState(false)
  const [isActionLoading, setIsActionLoading] = useState(false)

const handleMarkAsRead = async (e: React.MouseEvent) => {
    e.stopPropagation()
    if (isRead) return

setIsActionLoading(true)
    try {
      await onMarkAsRead(notification.id)
    } finally {
      setIsActionLoading(false)
    }
  }

const handleDelete = async (e: React.MouseEvent) => {
    e.stopPropagation()

setIsActionLoading(true)
    try {
      await onDelete(notification.id)
    } finally {
      setIsActionLoading(false)
    }
  }

const handleClick = () => {
    setIsExpanded(!isExpanded)
    if (!isRead) {
      onMarkAsRead(notification.id)
    }
  }

const getIcon = () => {
    switch (notification.category) {
      case NotificationCategory.ALERT:
        return <AlertCircle className="h-5 w-5 text-destructive" />
      case NotificationCategory.WARNING:
        return <AlertTriangle className="h-5 w-5 text-warning" />
      case NotificationCategory.SUCCESS:
        return <CheckCircle2 className="h-5 w-5 text-success" />
      case NotificationCategory.ACTION_REQUIRED:
        return <Calendar className="h-5 w-5 text-primary" />
      case NotificationCategory.INFO:
      default:
        return <Info className="h-5 w-5 text-info" />
    }
  }

const formatDate = (date: Date) => {
    return format(new Date(date), "d 'de' MMMM 'às' HH:mm", { locale: ptBR })
  }

return (
    <div
      className={cn(
        "p-4 hover:bg-muted/50 cursor-pointer transition-colors",
        !isRead && "bg-muted/20 border-l-4 border-primary",
      )}
      onClick={handleClick}
    >
      <div className="flex items-start gap-3">
        <div className="mt-1">{getIcon()}</div>
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-2">
            <h4 className={cn("text-sm font-medium line-clamp-1", !isRead && "font-semibold")}>{notification.title}</h4>
            <div className="flex items-center shrink-0">
              <span className="text-xs text-muted-foreground whitespace-nowrap">
                {formatDate(notification.createdAt)}
              </span>
              <DropdownMenu>
                <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
                  <Button variant="ghost" size="icon" className="h-8 w-8">
                    <MoreVertical className="h-4 w-4" />
                    <span className="sr-only">Ações</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  {!isRead && (
                    <DropdownMenuItem onClick={(e) => handleMarkAsRead(e)} disabled={isActionLoading}>
                      <Check className="mr-2 h-4 w-4" />
                      <span>Marcar como lida</span>
                    </DropdownMenuItem>
                  )}
                  <DropdownMenuItem onClick={(e) => handleDelete(e)} disabled={isActionLoading}>
                    <Trash2 className="mr-2 h-4 w-4" />
                    <span>Excluir</span>
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          </div>

<p className={cn("text-sm text-muted-foreground mt-1", isExpanded ? "" : "line-clamp-2")}>
            {notification.message}
          </p>

{isExpanded && notification.actions && notification.actions.length > 0 && (
            <div className="mt-3 flex flex-wrap gap-2">
              {notification.actions.map((action, index) => (
                <Button
                  key={index}
                  variant={action.type === "button" ? "default" : "outline"}
                  size="sm"
                  asChild
                  onClick={(e) => e.stopPropagation()}
                >
                  <a href={action.url} target="_blank" rel="noopener noreferrer">
                    {action.label}
                    {action.type === "link" && <ExternalLink className="ml-1 h-3 w-3" />}
                  </a>
                </Button>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-badge.tsx"
import { cn } from "@/lib/utils"

interface NotificationBadgeProps {
  count: number
  className?: string
}

export function NotificationBadge({ count, className }: NotificationBadgeProps) {
  const displayCount = count > 99 ? "99+" : count.toString()

return (
    <span
      className={cn(
        "absolute top-0 right-0 -mt-1 -mr-1 flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-destructive text-xs font-medium text-destructive-foreground",
        className,
      )}
    >
      {displayCount}
    </span>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-filter.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import {
  type NotificationFilter as NotificationFilterType,
  NotificationType,
  NotificationCategory,
  NotificationPriority,
  NotificationStatus,
} from "../../types/notification"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Checkbox } from "@/components/ui/checkbox"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DateRangePicker } from "@/components/ui/date-range-picker"

interface NotificationFilterProps {
  currentFilter?: NotificationFilterType
  onFilterChange: (filter: NotificationFilterType) => void
}

export function NotificationFilter({ currentFilter, onFilterChange }: NotificationFilterProps) {
  const [filter, setFilter] = useState<NotificationFilterType>(currentFilter || {})

useEffect(() => {
    if (currentFilter) {
      setFilter(currentFilter)
    }
  }, [currentFilter])

const handleFilterChange = (updates: Partial<NotificationFilterType>) => {
    const updatedFilter = { ...filter, ...updates }
    setFilter(updatedFilter)
  }

const handleApplyFilter = () => {
    onFilterChange(filter)
  }

const handleResetFilter = () => {
    const resetFilter: NotificationFilterType = {
      unreadOnly: false,
    }
    setFilter(resetFilter)
    onFilterChange(resetFilter)
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <div className="flex items-center justify-between">
          <Label htmlFor="unread-only" className="text-base">
            Apenas não lidas
          </Label>
          <Switch
            id="unread-only"
            checked={filter.unreadOnly || false}
            onCheckedChange={(checked) => handleFilterChange({ unreadOnly: checked })}
          />
        </div>

<div className="space-y-2">
          <Label className="text-base">Tipo</Label>
          <div className="grid grid-cols-2 gap-2">
            {Object.values(NotificationType).map((type) => (
              <div key={type} className="flex items-center space-x-2">
                <Checkbox
                  id={`type-${type}`}
                  checked={filter.type?.includes(type) || false}
                  onCheckedChange={(checked) => {
                    const currentTypes = filter.type || []
                    const updatedTypes = checked ? [...currentTypes, type] : currentTypes.filter((t) => t !== type)

handleFilterChange({ type: updatedTypes.length > 0 ? updatedTypes : undefined })
                  }}
                />
                <Label htmlFor={`type-${type}`} className="text-sm font-normal">
                  {formatEnumValue(type)}
                </Label>
              </div>
            ))}
          </div>
        </div>

<div className="space-y-2">
          <Label className="text-base">Categoria</Label>
          <div className="grid grid-cols-2 gap-2">
            {Object.values(NotificationCategory).map((category) => (
              <div key={category} className="flex items-center space-x-2">
                <Checkbox
                  id={`category-${category}`}
                  checked={filter.category?.includes(category) || false}
                  onCheckedChange={(checked) => {
                    const currentCategories = filter.category || []
                    const updatedCategories = checked
                      ? [...currentCategories, category]
                      : currentCategories.filter((c) => c !== category)

handleFilterChange({
                      category: updatedCategories.length > 0 ? updatedCategories : undefined,
                    })
                  }}
                />
                <Label htmlFor={`category-${category}`} className="text-sm font-normal">
                  {formatEnumValue(category)}
                </Label>
              </div>
            ))}
          </div>
        </div>

<div className="space-y-2">
          <Label htmlFor="priority-filter" className="text-base">
            Prioridade
          </Label>
          <Select
            value={filter.priority?.length ? filter.priority[0] : ""}
            onValueChange={(value) => {
              if (value) {
                handleFilterChange({ priority: [value as NotificationPriority] })
              } else {
                handleFilterChange({ priority: undefined })
              }
            }}
          >
            <SelectTrigger id="priority-filter">
              <SelectValue placeholder="Todas as prioridades" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="NOT_SELECTED">Todas as prioridades</SelectItem>
              {Object.values(NotificationPriority).map((priority) => (
                <SelectItem key={priority} value={priority}>
                  {formatEnumValue(priority)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <Label htmlFor="status-filter" className="text-base">
            Status
          </Label>
          <Select
            value={filter.status?.length ? filter.status[0] : ""}
            onValueChange={(value) => {
              if (value) {
                handleFilterChange({ status: [value as NotificationStatus] })
              } else {
                handleFilterChange({ status: undefined })
              }
            }}
          >
            <SelectTrigger id="status-filter">
              <SelectValue placeholder="Todos os status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="NOT_SELECTED">Todos os status</SelectItem>
              {Object.values(NotificationStatus).map((status) => (
                <SelectItem key={status} value={status}>
                  {formatEnumValue(status)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>

<div className="space-y-2">
          <Label className="text-base">Período</Label>
          <DateRangePicker
            from={filter.dateRange?.start}
            to={filter.dateRange?.end}
            onSelect={(range) => {
              if (range?.from && range?.to) {
                handleFilterChange({
                  dateRange: {
                    start: range.from,
                    end: range.to,
                  },
                })
              } else {
                handleFilterChange({ dateRange: undefined })
              }
            }}
          />
        </div>
      </div>

<div className="flex items-center justify-between pt-2">
        <Button variant="outline" onClick={handleResetFilter}>
          Limpar filtros
        </Button>
        <Button onClick={handleApplyFilter}>Aplicar filtros</Button>
      </div>
    </div>
  )
}

function formatEnumValue(value: string): string {
  // Convert SNAKE_CASE to Title Case
  return value
    .toLowerCase()
    .split("_")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ")
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-preferences.tsx"
"use client"

import { useState, useEffect } from "react"
import { NotificationType } from "../../types/notification"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { toast } from "@/components/ui/use-toast"

interface NotificationPreference {
  type: NotificationType
  channels: {
    app: boolean
    email: boolean
    sms: boolean
  }
}

interface NotificationPreferencesProps {
  userId: string
}

export function NotificationPreferences({ userId }: NotificationPreferencesProps) {
  const [preferences, setPreferences] = useState<NotificationPreference[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)

useEffect(() => {
    const fetchPreferences = async () => {
      setIsLoading(true)
      try {
        // In a real app, fetch from API
        // const response = await fetch(`/api/users/${userId}/notification-preferences`)
        // const data = await response.json()

// For now, use mock data
        const mockPreferences: NotificationPreference[] = Object.values(NotificationType).map((type) => ({
          type,
          channels: {
            app: true,
            email: type === NotificationType.SAFETY_ALERT || type === NotificationType.WEATHER_ALERT,
            sms: type === NotificationType.SAFETY_ALERT,
          },
        }))

setPreferences(mockPreferences)
      } catch (error) {
        console.error("Error fetching notification preferences:", error)
      } finally {
        setIsLoading(false)
      }
    }

fetchPreferences()
  }, [userId])

const handleToggleChannel = (typeIndex: number, channel: keyof NotificationPreference["channels"]) => {
    setPreferences((prev) => {
      const updated = [...prev]
      updated[typeIndex] = {
        ...updated[typeIndex],
        channels: {
          ...updated[typeIndex].channels,
          [channel]: !updated[typeIndex].channels[channel],
        },
      }
      return updated
    })
  }

const handleSavePreferences = async () => {
    setIsSaving(true)
    try {
      // In a real app, save to API
      // await fetch(`/api/users/${userId}/notification-preferences`, {
      //   method: 'PUT',
      //   headers: {
      //     'Content-Type': 'application/json',
      //   },
      //   body: JSON.stringify(preferences),
      // })

// Mock successful save
      await new Promise((resolve) => setTimeout(resolve, 500))

toast({
        title: "Preferências salvas",
        description: "Suas preferências de notificação foram atualizadas com sucesso.",
      })
    } catch (error) {
      console.error("Error saving notification preferences:", error)
      toast({
        title: "Erro ao salvar",
        description: "Ocorreu um erro ao salvar suas preferências. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSaving(false)
    }
  }

if (isLoading) {
    return (
      <div className="flex items-center justify-center p-8">
        <p className="text-muted-foreground">Carregando preferências...</p>
      </div>
    )
  }

return (
    <div className="space-y-6">
      <div className="space-y-4">
        <div className="grid grid-cols-4 gap-4 text-sm font-medium">
          <div className="col-span-1">Tipo</div>
          <div className="col-span-1 text-center">App</div>
          <div className="col-span-1 text-center">Email</div>
          <div className="col-span-1 text-center">SMS</div>
        </div>

{preferences.map((preference, index) => (
          <div key={preference.type} className="grid grid-cols-4 gap-4 items-center">
            <div className="col-span-1 text-sm">{formatNotificationType(preference.type)}</div>
            <div className="col-span-1 flex justify-center">
              <Switch
                checked={preference.channels.app}
                onCheckedChange={() => handleToggleChannel(index, "app")}
                aria-label={`Receber notificações do tipo ${preference.type} no app`}
              />
            </div>
            <div className="col-span-1 flex justify-center">
              <Switch
                checked={preference.channels.email}
                onCheckedChange={() => handleToggleChannel(index, "email")}
                aria-label={`Receber notificações do tipo ${preference.type} por email`}
              />
            </div>
            <div className="col-span-1 flex justify-center">
              <Switch
                checked={preference.channels.sms}
                onCheckedChange={() => handleToggleChannel(index, "sms")}
                aria-label={`Receber notificações do tipo ${preference.type} por SMS`}
              />
            </div>
          </div>
        ))}
      </div>

<div className="flex justify-end pt-2">
        <Button onClick={handleSavePreferences} disabled={isSaving}>
          {isSaving ? "Salvando..." : "Salvar preferências"}
        </Button>
      </div>
    </div>
  )
}

function formatNotificationType(type: NotificationType): string {
  const typeMap: Record<NotificationType, string> = {
    [NotificationType.PROJECT_UPDATE]: "Atualizações de projeto",
    [NotificationType.SCHEDULE_CHANGE]: "Alterações de agenda",
    [NotificationType.TASK_ASSIGNMENT]: "Atribuições de tarefas",
    [NotificationType.INSPECTION_REMINDER]: "Lembretes de inspeção",
    [NotificationType.DOCUMENT_REQUEST]: "Solicitações de documentos",
    [NotificationType.EQUIPMENT_ISSUE]: "Problemas com equipamentos",
    [NotificationType.SAFETY_ALERT]: "Alertas de segurança",
    [NotificationType.WEATHER_ALERT]: "Alertas meteorológicos",
    [NotificationType.SYSTEM_NOTIFICATION]: "Notificações do sistema",
  }

return typeMap[type] || type
}
[V0_FILE]typescriptreact:file="app/api/installation/notifications/[id]/read/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// This is a reference to the mock database in the main route file
// In a real app, you would use a proper database
import { notifications } from "../route"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const { userId } = await request.json()

if (!userId) {
      return NextResponse.json({ error: "User ID is required" }, { status: 400 })
    }

const notificationIndex = notifications.findIndex((n) => n.id === id)

if (notificationIndex === -1) {
      return NextResponse.json({ error: "Notification not found" }, { status: 404 })
    }

const notification = notifications[notificationIndex]

// Check if user already read this notification
    if (!notification.readBy) {
      notification.readBy = []
    }

if (!notification.readBy.some((reader) => reader.userId === userId)) {
      notification.readBy.push({
        userId,
        readAt: new Date(),
      })
    }

return NextResponse.json(notification)
  } catch (error) {
    console.error(`Error in POST /api/installation/notifications/${params.id}/read:`, error)
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/notifications/read-all/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// This is a reference to the mock database in the main route file
// In a real app, you would use a proper database
import { notifications } from "../route"

export async function POST(request: NextRequest) {
  try {
    const { userId } = await request.json()
    const { searchParams } = new URL(request.url)

if (!userId) {
      return NextResponse.json({ error: "User ID is required" }, { status: 400 })
    }

// Parse filter parameters
    const type = searchParams.get("type")?.split(",")
    const category = searchParams.get("category")?.split(",")
    const priority = searchParams.get("priority")?.split(",")
    const projectId = searchParams.get("projectId")

// Mark notifications as read based on filters
    for (const notification of notifications) {
      // Skip if already read by this user
      if (notification.readBy?.some((reader) => reader.userId === userId)) {
        continue
      }

// Apply filters
      if (type && !type.includes(notification.type)) continue
      if (category && !category.includes(notification.category)) continue
      if (priority && !priority.includes(notification.priority)) continue
      if (projectId && notification.projectId !== projectId) continue

// Mark as read
      if (!notification.readBy) {
        notification.readBy = []
      }

notification.readBy.push({
        userId,
        readAt: new Date(),
      })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error in POST /api/installation/notifications/read-all:", error)
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/notifications/[id]/send/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { NotificationStatus } from "@/modules/installation/types/notification"

// This is a reference to the mock database in the main route file
// In a real app, you would use a proper database
import { notifications } from "../route"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const notificationIndex = notifications.findIndex((n) => n.id === id)

if (notificationIndex === -1) {
      return NextResponse.json({ error: "Notification not found" }, { status: 404 })
    }

const notification = notifications[notificationIndex]

// Check if notification can be sent
    if (notification.status !== NotificationStatus.DRAFT && notification.status !== NotificationStatus.SCHEDULED) {
      return NextResponse.json({ error: "Notification cannot be sent. Invalid status." }, { status: 400 })
    }

// Update notification status
    notification.status = NotificationStatus.SENT
    notification.sentAt = new Date()

return NextResponse.json(notification)
  } catch (error) {
    console.error(`Error in POST /api/installation/notifications/${params.id}/send:`, error)
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/notifications/[id]/cancel/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { NotificationStatus } from "@/modules/installation/types/notification"

// This is a reference to the mock database in the main route file
// In a real app, you would use a proper database
import { notifications } from "../route"

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const notificationIndex = notifications.findIndex((n) => n.id === id)

if (notificationIndex === -1) {
      return NextResponse.json({ error: "Notification not found" }, { status: 404 })
    }

const notification = notifications[notificationIndex]

// Check if notification can be canceled
    if (notification.status !== NotificationStatus.SCHEDULED) {
      return NextResponse.json({ error: "Only scheduled notifications can be canceled" }, { status: 400 })
    }

// Update notification status
    notification.status = NotificationStatus.CANCELED

return NextResponse.json(notification)
  } catch (error) {
    console.error(`Error in POST /api/installation/notifications/${params.id}/cancel:`, error)
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/installation/notifications/page.tsx"
import type { Metadata } from "next"
import { NotificationManagement } from "@/modules/installation/components/notifications/notification-management"

export const metadata: Metadata = {
  title: "Gerenciamento de Notificações | Instalação",
  description: "Gerencie notificações e alertas do sistema de instalação",
}

export default function NotificationsPage() {
  return (
    <div className="container mx-auto py-6">
      <h1 className="text-3xl font-bold mb-6">Gerenciamento de Notificações</h1>
      <NotificationManagement />
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/notifications/notification-management.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useNotifications } from "../../hooks/use-notifications"
import {
  NotificationType,
  NotificationCategory,
  NotificationPriority,
  NotificationStatus,
  type Recipient,
} from "../../types/notification"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"
import { toast } from "@/components/ui/use-toast"
import { NotificationItem } from "./notification-item"
import { NotificationFilter } from "./notification-filter"

export function NotificationManagement() {
  // Mock user ID - in a real app, this would come from authentication
  const userId = "user-1"

const [activeTab, setActiveTab] = useState("list")

const {
    notifications,
    isLoading,
    error,
    filter,
    updateFilter,
    fetchNotifications,
    markAsRead,
    deleteNotification,
    notificationService,
  } = useNotifications({
    userId,
    autoRefresh: true,
    refreshInterval: 30000, // 30 seconds
  })

const [newNotification, setNewNotification] = useState({
    type: NotificationType.PROJECT_UPDATE,
    category: NotificationCategory.INFO,
    priority: NotificationPriority.MEDIUM,
    title: "",
    message: "",
    projectId: "",
    recipientType: "team",
    recipientId: "",
    deliveryMethods: ["app"],
  })

const [isSubmitting, setIsSubmitting] = useState(false)

const handleCreateNotification = async (e: React.FormEvent) => {
    e.preventDefault()

if (!newNotification.title || !newNotification.message || !newNotification.recipientId) {
      toast({
        title: "Campos obrigatórios",
        description: "Preencha todos os campos obrigatórios.",
        variant: "destructive",
      })
      return
    }

setIsSubmitting(true)

try {
      const recipient: Recipient = {
        type: newNotification.recipientType as "user" | "team" | "role" | "email",
        id: newNotification.recipientId,
        deliveryMethod: newNotification.deliveryMethods as ("app" | "email" | "sms")[],
      }

await notificationService.createNotification({
        type: newNotification.type,
        category: newNotification.category,
        priority: newNotification.priority,
        title: newNotification.title,
        message: newNotification.message,
        projectId: newNotification.projectId || undefined,
        recipients: [recipient],
        status: NotificationStatus.SENT,
      })

toast({
        title: "Notificação enviada",
        description: "A notificação foi enviada com sucesso.",
      })

// Reset form
      setNewNotification({
        type: NotificationType.PROJECT_UPDATE,
        category: NotificationCategory.INFO,
        priority: NotificationPriority.MEDIUM,
        title: "",
        message: "",
        projectId: "",
        recipientType: "team",
        recipientId: "",
        deliveryMethods: ["app"],
      })

// Refresh notifications list
      fetchNotifications()

// Switch to list tab
      setActiveTab("list")
    } catch (error) {
      console.error("Error creating notification:", error)
      toast({
        title: "Erro ao enviar",
        description: "Ocorreu um erro ao enviar a notificação. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <div>
      <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
        <TabsList className="grid w-full max-w-md grid-cols-2">
          <TabsTrigger value="list">Lista de Notificações</TabsTrigger>
          <TabsTrigger value="create">Criar Notificação</TabsTrigger>
        </TabsList>

<TabsContent value="list" className="mt-6">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <div className="lg:col-span-1">
              <Card>
                <CardHeader>
                  <CardTitle>Filtros</CardTitle>
                </CardHeader>
                <CardContent>
                  <NotificationFilter currentFilter={filter} onFilterChange={updateFilter} />
                </CardContent>
              </Card>
            </div>

<div className="lg:col-span-3">
              <Card>
                <CardHeader>
                  <CardTitle>Notificações</CardTitle>
                  <CardDescription>Gerencie todas as notificações do sistema</CardDescription>
                </CardHeader>
                <CardContent>
                  {isLoading && notifications.length === 0 ? (
                    <div className="flex items-center justify-center p-8">
                      <p className="text-muted-foreground">Carregando notificações...</p>
                    </div>
                  ) : error ? (
                    <div className="flex items-center justify-center p-8">
                      <p className="text-destructive">Erro ao carregar notificações: {error.message}</p>
                    </div>
                  ) : notifications.length === 0 ? (
                    <div className="flex items-center justify-center p-8">
                      <p className="text-muted-foreground">Nenhuma notificação encontrada</p>
                    </div>
                  ) : (
                    <div className="divide-y">
                      {notifications.map((notification) => (
                        <NotificationItem
                          key={notification.id}
                          notification={notification}
                          onMarkAsRead={markAsRead}
                          onDelete={deleteNotification}
                          isRead={notification.readBy?.some((reader) => reader.userId === userId) || false}
                        />
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </div>
          </div>
        </TabsContent>

<TabsContent value="create" className="mt-6">
          <Card>
            <CardHeader>
              <CardTitle>Criar Nova Notificação</CardTitle>
              <CardDescription>Envie notificações para usuários, equipes ou funções específicas</CardDescription>
            </CardHeader>
            <form onSubmit={handleCreateNotification}>
              <CardContent className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="notification-type">Tipo de Notificação</Label>
                    <Select
                      value={newNotification.type}
                      onValueChange={(value) =>
                        setNewNotification({
                          ...newNotification,
                          type: value as NotificationType,
                        })
                      }
                    >
                      <SelectTrigger id="notification-type">
                        <SelectValue placeholder="Selecione o tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        {Object.values(NotificationType).map((type) => (
                          <SelectItem key={type} value={type}>
                            {formatEnumValue(type)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="notification-category">Categoria</Label>
                    <Select
                      value={newNotification.category}
                      onValueChange={(value) =>
                        setNewNotification({
                          ...newNotification,
                          category: value as NotificationCategory,
                        })
                      }
                    >
                      <SelectTrigger id="notification-category">
                        <SelectValue placeholder="Selecione a categoria" />
                      </SelectTrigger>
                      <SelectContent>
                        {Object.values(NotificationCategory).map((category) => (
                          <SelectItem key={category} value={category}>
                            {formatEnumValue(category)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="notification-priority">Prioridade</Label>
                    <Select
                      value={newNotification.priority}
                      onValueChange={(value) =>
                        setNewNotification({
                          ...newNotification,
                          priority: value as NotificationPriority,
                        })
                      }
                    >
                      <SelectTrigger id="notification-priority">
                        <SelectValue placeholder="Selecione a prioridade" />
                      </SelectTrigger>
                      <SelectContent>
                        {Object.values(NotificationPriority).map((priority) => (
                          <SelectItem key={priority} value={priority}>
                            {formatEnumValue(priority)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="project-id">ID do Projeto (opcional)</Label>
                    <Input
                      id="project-id"
                      value={newNotification.projectId}
                      onChange={(e) =>
                        setNewNotification({
                          ...newNotification,
                          projectId: e.target.value,
                        })
                      }
                      placeholder="Deixe em branco para notificações gerais"
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label htmlFor="notification-title">Título</Label>
                  <Input
                    id="notification-title"
                    value={newNotification.title}
                    onChange={(e) =>
                      setNewNotification({
                        ...newNotification,
                        title: e.target.value,
                      })
                    }
                    placeholder="Título da notificação"
                    required
                  />
                </div>

<div className="space-y-2">
                  <Label htmlFor="notification-message">Mensagem</Label>
                  <Textarea
                    id="notification-message"
                    value={newNotification.message}
                    onChange={(e) =>
                      setNewNotification({
                        ...newNotification,
                        message: e.target.value,
                      })
                    }
                    placeholder="Conteúdo da notificação"
                    rows={4}
                    required
                  />
                </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="recipient-type">Tipo de Destinatário</Label>
                    <Select
                      value={newNotification.recipientType}
                      onValueChange={(value) =>
                        setNewNotification({
                          ...newNotification,
                          recipientType: value,
                        })
                      }
                    >
                      <SelectTrigger id="recipient-type">
                        <SelectValue placeholder="Selecione o tipo" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="user">Usuário</SelectItem>
                        <SelectItem value="team">Equipe</SelectItem>
                        <SelectItem value="role">Função</SelectItem>
                        <SelectItem value="email">Email</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>

<div className="space-y-2">
                    <Label htmlFor="recipient-id">ID do Destinatário</Label>
                    <Input
                      id="recipient-id"
                      value={newNotification.recipientId}
                      onChange={(e) =>
                        setNewNotification({
                          ...newNotification,
                          recipientId: e.target.value,
                        })
                      }
                      placeholder={
                        newNotification.recipientType === "user"
                          ? "ID do usuário"
                          : newNotification.recipientType === "team"
                            ? "ID da equipe"
                            : newNotification.recipientType === "role"
                              ? "Nome da função"
                              : "Endereço de email"
                      }
                      required
                    />
                  </div>
                </div>

<div className="space-y-2">
                  <Label>Métodos de Entrega</Label>
                  <div className="flex flex-wrap gap-4 mt-2">
                    <div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="delivery-app"
                        checked={newNotification.deliveryMethods.includes("app")}
                        onChange={(e) => {
                          const methods = e.target.checked
                            ? [...newNotification.deliveryMethods, "app"]
                            : newNotification.deliveryMethods.filter((m) => m !== "app")
                          setNewNotification({
                            ...newNotification,
                            deliveryMethods: methods,
                          })
                        }}
                        className="rounded border-gray-300 text-primary focus:ring-primary"
                      />
                      <Label htmlFor="delivery-app" className="text-sm font-normal">
                        App
                      </Label>
                    </div>

<div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="delivery-email"
                        checked={newNotification.deliveryMethods.includes("email")}
                        onChange={(e) => {
                          const methods = e.target.checked
                            ? [...newNotification.deliveryMethods, "email"]
                            : newNotification.deliveryMethods.filter((m) => m !== "email")
                          setNewNotification({
                            ...newNotification,
                            deliveryMethods: methods,
                          })
                        }}
                        className="rounded border-gray-300 text-primary focus:ring-primary"
                      />
                      <Label htmlFor="delivery-email" className="text-sm font-normal">
                        Email
                      </Label>
                    </div>

<div className="flex items-center space-x-2">
                      <input
                        type="checkbox"
                        id="delivery-sms"
                        checked={newNotification.deliveryMethods.includes("sms")}
                        onChange={(e) => {
                          const methods = e.target.checked
                            ? [...newNotification.deliveryMethods, "sms"]
                            : newNotification.deliveryMethods.filter((m) => m !== "sms")
                          setNewNotification({
                            ...newNotification,
                            deliveryMethods: methods,
                          })
                        }}
                        className="rounded border-gray-300 text-primary focus:ring-primary"
                      />
                      <Label htmlFor="delivery-sms" className="text-sm font-normal">
                        SMS
                      </Label>
                    </div>
                  </div>
                </div>
              </CardContent>
              <CardFooter className="flex justify-between">
                <Button variant="outline" type="button" onClick={() => setActiveTab("list")}>
                  Cancelar
                </Button>
                <Button type="submit" disabled={isSubmitting}>
                  {isSubmitting ? "Enviando..." : "Enviar Notificação"}
                </Button>
              </CardFooter>
            </form>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

function formatEnumValue(value: string): string {
  // Convert SNAKE_CASE to Title Case
  return value
    .toLowerCase()
    .split("_")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ")
}
[V0_FILE]typescriptreact:file="modules/installation/contexts/installation-context.tsx" isQuickEdit="true"
"use client"

import { createContext, useContext, type ReactNode, useState, useEffect } from "react"
import { InstallationProjectService } from "../services/installation-project-service"
import { ScheduleService } from "../services/schedule-service"
import { TeamService } from "../services/team-service"
import { NotificationService } from "../services/notification-service"

interface InstallationContextType {
  projectService: InstallationProjectService
  scheduleService: ScheduleService
  teamService: TeamService
  equipmentService: any // Placeholder for EquipmentService
  inspectionService: any // Placeholder for InspectionService
  checklistService: any // Placeholder for ChecklistService
  documentService: any // Placeholder for DocumentService
  notificationService: NotificationService // Update this line
  taskService: any // Placeholder for TaskService
  progressService: any // Placeholder for ProgressService
  reportService: any // Placeholder for ReportService
  analyticsService: any // Placeholder for AnalyticsService
  isInitialized: boolean
  error: string | null
}

const InstallationContext = createContext<InstallationContextType | undefined>(undefined)

export function InstallationProvider({ children }: { children: ReactNode }) {
  const [isInitialized, setIsInitialized] = useState(false)
  const [error, setError] = useState<string | null>(null)

// Initialize  = useState(false)

// Initialize services
  const projectService = new InstallationProjectService()
  const scheduleService = new ScheduleService()
  const teamService = new TeamService()
  const equipmentService = {} as any // Placeholder for EquipmentService
  const inspectionService = {} as any // Placeholder for InspectionService
  const checklistService = {} as any // Placeholder for ChecklistService
  const documentService = {} as any // Placeholder for DocumentService
  const notificationService = new NotificationService() // Update this line
  const taskService = {} as any // Placeholder for TaskService
  const progressService = {} as any // Placeholder for ProgressService
  const reportService = {} as any // Placeholder for ReportService
  const analyticsService = {} as any // Placeholder for AnalyticsService

useEffect(() => {
    // Perform any initialization logic here
    try {
      // Example: Load initial data, check authentication, etc.
      setIsInitialized(true)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to initialize installation module")
    }
  }, [])

return (
    <InstallationContext.Provider
      value={{
        projectService,
        scheduleService,
        teamService,
        equipmentService,
        inspectionService,
        checklistService,
        documentService,
        notificationService,
        taskService,
        progressService,
        reportService,
        analyticsService,
        isInitialized,
        error,
      }}
    >
      {children}
    </InstallationContext.Provider>
  )
}

export function useInstallation() {
  const context = useContext(InstallationContext)
  if (context === undefined) {
    throw new Error("useInstallation must be used within an InstallationProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="modules/installation/hooks/index.ts" isQuickEdit="true"
export * from "./use-installation-projects"
export * from "./use-schedule"
export * from "./use-teams"
export * from "./use-equipment"
export * from "./use-inspections"
export * from "./use-checklists"
export * from "./use-documents"
export * from "./use-notifications"
export * from "./use-tasks"
export * from "./use-progress"
export * from "./use-installation-analytics"
[V0_FILE]typescriptreact:file="modules/integration/services/sales-installation-integration-service.ts" isFixed="true" isQuickEdit="true"
import { OpportunityService } from "@/modules/sales/services/opportunity-service"
import { ContractService } from "@/modules/sales/services/contract-service"
import { InstallationProjectService } from "@/modules/installation/services/installation-project-service"
import { NotificationService } from "@/modules/installation/services/notification-service"
import type { Opportunity } from "@/modules/sales/types/opportunity"
import type { InstallationProject } from "@/modules/installation/types/installation-project"
import type { NotificationType } from "@/modules/installation/types/notification"

export class SalesInstallationIntegrationService {
  private opportunityService: OpportunityService
  private contractService: ContractService
  private installationProjectService: InstallationProjectService
  private notificationService: NotificationService

constructor() {
    this.opportunityService = new OpportunityService()
    this.contractService = new ContractService()
    this.installationProjectService = new InstallationProjectService()
    this.notificationService = new NotificationService()
  }

/**
   * Cria um projeto de instalação a partir de um contrato assinado
   */
  async createInstallationFromContract(contractId: string, userId: string): Promise<InstallationProject> {
    try {
      // Buscar o contrato
      const contract = await this.contractService.getContractById(contractId)
      if (!contract) {
        throw new Error(`Contrato não encontrado: ${contractId}`)
      }

// Verificar se o contrato está assinado
      if (!contract.signedAt) {
        throw new Error(`Contrato não está assinado: ${contractId}`)
      }

// Buscar a oportunidade relacionada
      const opportunity = await this.opportunityService.getOpportunityById(contract.opportunityId)
      if (!opportunity) {
        throw new Error(`Oportunidade não encontrada: ${contract.opportunityId}`)
      }

// Criar o projeto de instalação
      const installationProject: Omit<InstallationProject, "id" | "createdAt" | "updatedAt"> = {
        salesProjectId: opportunity.id,
        designProjectId: contract.designProjectId || "",
        customerId: contract.customerId,
        title: `Instalação: ${opportunity.title}`,
        description: `Projeto de instalação criado a partir do contrato #${contract.id}`,
        status: InstallationStatus.PENDING,
        priority: Priority.MEDIUM,
        startDate: this.calculateStartDate(contract.signedAt),
        endDate: this.calculateEndDate(contract.signedAt, contract.systemSize),
        location: {
          address: contract.installationAddress.street,
          city: contract.installationAddress.city,
          state: contract.installationAddress.state,
          zipCode: contract.installationAddress.zipCode,
          coordinates: contract.installationAddress.coordinates,
        },
        systemSize: contract.systemSize,
        panelCount: contract.panelCount || 0,
        inverterCount: contract.inverterCount || 0,
        notes: `Contrato assinado em ${contract.signedAt.toLocaleDateString()}. ${contract.notes || ""}`,
        createdBy: userId,
      }

// Salvar o projeto de instalação
      const createdProject = await this.installationProjectService.createProject(installationProject)

// Atualizar o contrato com a referência ao projeto de instalação
      await this.contractService.updateContract(contractId, {
        installationProjectId: createdProject.id,
      })

// Criar notificação
      await this.notificationService.createNotification({
        type: "PROJECT_UPDATE" as NotificationType,
        title: "Novo Projeto de Instalação Criado",
        message: `Um novo projeto de instalação foi criado a partir do contrato #${contract.id}`,
        priority: "medium",
        relatedEntityId: createdProject.id,
        relatedEntityType: "installation_project",
        userId,
      })

return createdProject
    } catch (error) {
      console.error("Erro ao criar projeto de instalação a partir do contrato:", error)
      throw error
    }
  }

/**
   * Sincroniza dados do contrato para o projeto de instalação
   */
  async syncContractToInstallation(contractId: string): Promise<InstallationProject> {
    try {
      // Buscar o contrato
      const contract = await this.contractService.getContractById(contractId)
      if (!contract) {
        throw new Error(`Contrato não encontrado: ${contractId}`)
      }

// Verificar se existe um projeto de instalação associado
      if (!contract.installationProjectId) {
        throw new Error(`Contrato não possui projeto de instalação associado: ${contractId}`)
      }

// Buscar o projeto de instalação
      const project = await this.installationProjectService.getProjectById(contract.installationProjectId)
      if (!project) {
        throw new Error(`Projeto de instalação não encontrado: ${contract.installationProjectId}`)
      }

// Atualizar o projeto com os dados mais recentes do contrato
      const updatedProject = await this.installationProjectService.updateProject(project.id, {
        systemSize: contract.systemSize,
        panelCount: contract.panelCount || project.panelCount,
        inverterCount: contract.inverterCount || project.inverterCount,
        location: {
          address: contract.installationAddress.street,
          city: contract.installationAddress.city,
          state: contract.installationAddress.state,
          zipCode: contract.installationAddress.zipCode,
          coordinates: contract.installationAddress.coordinates || project.location.coordinates,
        },
      })

return updatedProject
    } catch (error) {
      console.error("Erro ao sincronizar contrato com projeto de instalação:", error)
      throw error
    }
  }

/**
   * Atualiza o status da oportunidade com base no progresso da instalação
   */
  async updateOpportunityFromInstallation(installationId: string): Promise<Opportunity> {
    try {
      // Buscar o projeto de instalação
      const project = await this.installationProjectService.getProjectById(installationId)
      if (!project) {
        throw new Error(`Projeto de instalação não encontrado: ${installationId}`)
      }

// Verificar se existe uma oportunidade associada
      if (!project.salesProjectId) {
        throw new Error(`Projeto de instalação não possui oportunidade associada: ${installationId}`)
      }

// Buscar a oportunidade
      const opportunity = await this.opportunityService.getOpportunityById(project.salesProjectId)
      if (!opportunity) {
        throw new Error(`Oportunidade não encontrada: ${project.salesProjectId}`)
      }

// Não precisamos atualizar nada na oportunidade, pois ela já está em CLOSED_WON
      // Este método pode ser expandido no futuro para atualizar outros campos

return opportunity
    } catch (error) {
      console.error("Erro ao atualizar oportunidade a partir do projeto de instalação:", error)
      throw error
    }
  }

/**
   * Busca todos os projetos de instalação relacionados a uma oportunidade
   */
  async getInstallationsByOpportunityId(opportunityId: string): Promise<InstallationProject[]> {
    try {
      // Implementação simplificada - em um sistema real, isso seria feito com uma consulta ao banco de dados
      const allProjects = await this.installationProjectService.getProjects()
      return allProjects.filter((project) => project.salesProjectId === opportunityId)
    } catch (error) {
      console.error("Erro ao buscar projetos de instalação por oportunidade:", error)
      throw error
    }
  }

/**
   * Busca a oportunidade relacionada a um projeto de instalação
   */
  async getOpportunityByInstallationId(installationId: string): Promise<Opportunity | null> {
    try {
      // Buscar o projeto de instalação
      const project = await this.installationProjectService.getProjectById(installationId)
      if (!project || !project.salesProjectId) {
        return null
      }

// Buscar a oportunidade
      return await this.opportunityService.getOpportunityById(project.salesProjectId)
    } catch (error) {
      console.error("Erro ao buscar oportunidade por projeto de instalação:", error)
      throw error
    }
  }

/**
   * Calcula a data de início estimada para o projeto de instalação
   */
  private calculateStartDate(contractSignedDate: Date): Date {
    // Lógica simplificada: início 14 dias após a assinatura do contrato
    const startDate = new Date(contractSignedDate)
    startDate.setDate(startDate.getDate() + 14)
    return startDate
  }

/**
   * Calcula a data de término estimada para o projeto de instalação
   */
  private calculateEndDate(contractSignedDate: Date, systemSize: number): Date {
    // Lógica simplificada: duração baseada no tamanho do sistema
    // Sistemas maiores levam mais tempo para instalar
    const startDate = this.calculateStartDate(contractSignedDate)
    const endDate = new Date(startDate)

// Base: 5 dias + 1 dia adicional para cada 2kWp
    const additionalDays = Math.ceil(systemSize / 2)
    endDate.setDate(endDate.getDate() + 5 + additionalDays)

return endDate
  }
}
[V0_FILE]typescriptreact:file="modules/integration/hooks/use-sales-installation-integration.ts"
"use client"

import { useState, useCallback } from "react"
import { SalesInstallationIntegrationService } from "../services/sales-installation-integration-service"

export function useSalesInstallationIntegration() {
  const [loading, setLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)

const integrationService = new SalesInstallationIntegrationService()

const createInstallationFromContract = useCallback(async (contractId: string, userId: string) => {
    setLoading(true)
    setError(null)
    try {
      const project = await integrationService.createInstallationFromContract(contractId, userId)
      return project
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao criar projeto de instalação")
      throw err
    } finally {
      setLoading(false)
    }
  }, [])

const syncContractToInstallation = useCallback(async (contractId: string) => {
    setLoading(true)
    setError(null)
    try {
      const project = await integrationService.syncContractToInstallation(contractId)
      return project
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao sincronizar contrato com instalação")
      throw err
    } finally {
      setLoading(false)
    }
  }, [])

const getInstallationsByOpportunityId = useCallback(async (opportunityId: string) => {
    setLoading(true)
    setError(null)
    try {
      const projects = await integrationService.getInstallationsByOpportunityId(opportunityId)
      return projects
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao buscar projetos de instalação")
      throw err
    } finally {
      setLoading(false)
    }
  }, [])

const getOpportunityByInstallationId = useCallback(async (installationId: string) => {
    setLoading(true)
    setError(null)
    try {
      const opportunity = await integrationService.getOpportunityByInstallationId(installationId)
      return opportunity
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao buscar oportunidade")
      throw err
    } finally {
      setLoading(false)
    }
  }, [])

return {
    loading,
    error,
    createInstallationFromContract,
    syncContractToInstallation,
    getInstallationsByOpportunityId,
    getOpportunityByInstallationId,
  }
}
[V0_FILE]typescriptreact:file="modules/integration/components/sales-info-in-installation.tsx"
"use client"

import { useState, useEffect } from "react"
import { useSalesInstallationIntegration } from "../hooks/use-sales-installation-integration"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { ExternalLink, RefreshCw, AlertTriangle } from "lucide-react"
import { formatCurrency } from "@/modules/sales/utils/format-utils"
import { formatDate } from "@/modules/installation/utils/date-utils"
import type { Opportunity } from "@/modules/sales/types/opportunity"
import Link from "next/link"

interface SalesInfoInInstallationProps {
  installationId: string
}

export function SalesInfoInInstallation({ installationId }: SalesInfoInInstallationProps) {
  const [opportunity, setOpportunity] = useState<Opportunity | null>(null)
  const { loading, error, getOpportunityByInstallationId } = useSalesInstallationIntegration()

useEffect(() => {
    const fetchOpportunity = async () => {
      try {
        const data = await getOpportunityByInstallationId(installationId)
        setOpportunity(data)
      } catch (err) {
        console.error("Erro ao buscar oportunidade:", err)
      }
    }

fetchOpportunity()
  }, [installationId, getOpportunityByInstallationId])

const refreshData = async () => {
    try {
      const data = await getOpportunityByInstallationId(installationId)
      setOpportunity(data)
    } catch (err) {
      console.error("Erro ao atualizar oportunidade:", err)
    }
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-xl">Informações de Venda</CardTitle>
        <Button variant="ghost" size="sm" onClick={refreshData} disabled={loading}>
          <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
          <span className="sr-only">Atualizar</span>
        </Button>
      </CardHeader>
      <CardContent>
        {loading && !opportunity ? (
          <div className="space-y-2">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-4 w-1/2" />
          </div>
        ) : error ? (
          <div className="flex items-center text-red-500">
            <AlertTriangle className="h-4 w-4 mr-2" />
            <span>{error}</span>
          </div>
        ) : !opportunity ? (
          <div className="text-center py-4 text-gray-500">Nenhuma informação de venda encontrada para este projeto</div>
        ) : (
          <div className="space-y-4">
            <div>
              <h3 className="font-medium">Oportunidade</h3>
              <div className="flex justify-between items-center mt-1">
                <span className="text-lg font-semibold">{opportunity.title}</span>
                <Link href={`/sales/opportunities/${opportunity.id}`} passHref>
                  <Button variant="outline" size="sm" className="h-8">
                    <ExternalLink className="h-3.5 w-3.5 mr-1" />
                    Ver
                  </Button>
                </Link>
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div>
                <h4 className="text-sm text-gray-500">Valor</h4>
                <p className="font-medium">{formatCurrency(opportunity.value)}</p>
              </div>
              <div>
                <h4 className="text-sm text-gray-500">Status</h4>
                <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
                  {opportunity.stage}
                </Badge>
              </div>
              <div>
                <h4 className="text-sm text-gray-500">Cliente</h4>
                <p className="font-medium truncate">ID: {opportunity.leadId}</p>
              </div>
              <div>
                <h4 className="text-sm text-gray-500">Responsável</h4>
                <p className="font-medium truncate">{opportunity.assignedTo}</p>
              </div>
              <div>
                <h4 className="text-sm text-gray-500">Data de Fechamento</h4>
                <p className="font-medium">
                  {opportunity.actualCloseDate
                    ? formatDate(opportunity.actualCloseDate)
                    : formatDate(opportunity.expectedCloseDate)}
                </p>
              </div>
              <div>
                <h4 className="text-sm text-gray-500">Produtos</h4>
                <p className="font-medium">
                  {opportunity.products && opportunity.products.length > 0
                    ? opportunity.products.join(", ")
                    : "Nenhum produto"}
                </p>
              </div>
            </div>

{opportunity.notes && (
              <div>
                <h4 className="text-sm text-gray-500">Observações</h4>
                <p className="text-sm mt-1">{opportunity.notes}</p>
              </div>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/integration/components/installation-info-in-sales.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useSalesInstallationIntegration } from "../hooks/use-sales-installation-integration"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { ExternalLink, RefreshCw, AlertTriangle, Plus } from "lucide-react"
import { formatDate } from "@/modules/installation/utils/date-utils"
import type { InstallationProject, InstallationStatus } from "@/modules/installation/types/installation-project"
import Link from "next/link"

interface InstallationInfoInSalesProps {
  opportunityId: string
  contractId?: string
  userId: string
  onCreateInstallation?: (project: InstallationProject) => void
}

export function InstallationInfoInSales({
  opportunityId,
  contractId,
  userId,
  onCreateInstallation,
}: InstallationInfoInSalesProps) {
  const [projects, setProjects] = useState<InstallationProject[]>([])
  const [creating, setCreating] = useState<boolean>(false)
  const { loading, error, getInstallationsByOpportunityId, createInstallationFromContract } =
    useSalesInstallationIntegration()

useEffect(() => {
    const fetchProjects = async () => {
      try {
        const data = await getInstallationsByOpportunityId(opportunityId)
        setProjects(data)
      } catch (err) {
        console.error("Erro ao buscar projetos de instalação:", err)
      }
    }

fetchProjects()
  }, [opportunityId, getInstallationsByOpportunityId])

const refreshData = async () => {
    try {
      const data = await getInstallationsByOpportunityId(opportunityId)
      setProjects(data)
    } catch (err) {
      console.error("Erro ao atualizar projetos de instalação:", err)
    }
  }

const handleCreateInstallation = async () => {
    if (!contractId) return

setCreating(true)
    try {
      const project = await createInstallationFromContract(contractId, userId)
      setProjects((prev) => [...prev, project])
      onCreateInstallation?.(project)
    } catch (err) {
      console.error("Erro ao criar projeto de instalação:", err)
    } finally {
      setCreating(false)
    }
  }

const getStatusBadgeColor = (status: InstallationStatus) => {
    switch (status) {
      case InstallationStatus.PENDING:
        return "bg-yellow-50 text-yellow-700 border-yellow-200"
      case InstallationStatus.SCHEDULED:
        return "bg-blue-50 text-blue-700 border-blue-200"
      case InstallationStatus.IN_PROGRESS:
        return "bg-green-50 text-green-700 border-green-200"
      case InstallationStatus.INSPECTION:
        return "bg-purple-50 text-purple-700 border-purple-200"
      case InstallationStatus.COMPLETED:
        return "bg-teal-50 text-teal-700 border-teal-200"
      case InstallationStatus.CANCELED:
        return "bg-red-50 text-red-700 border-red-200"
      case InstallationStatus.ON_HOLD:
        return "bg-gray-50 text-gray-700 border-gray-200"
      default:
        return "bg-gray-50 text-gray-700 border-gray-200"
    }
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-xl">Projetos de Instalação</CardTitle>
        <div className="flex space-x-2">
          {contractId && (
            <Button
              variant="outline"
              size="sm"
              onClick={handleCreateInstallation}
              disabled={creating || loading || projects.length > 0}
            >
              <Plus className="h-4 w-4 mr-1" />
              Criar Instalação
            </Button>
          )}
          <Button variant="ghost" size="sm" onClick={refreshData} disabled={loading}>
            <RefreshCw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
            <span className="sr-only">Atualizar</span>
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        {loading && projects.length === 0 ? (
          <div className="space-y-2">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-3/4" />
            <Skeleton className="h-4 w-1/2" />
          </div>
        ) : error ? (
          <div className="flex items-center text-red-500">
            <AlertTriangle className="h-4 w-4 mr-2" />
            <span>{error}</span>
          </div>
        ) : projects.length === 0 ? (
          <div className="text-center py-4 text-gray-500">
            {contractId
              ? "Nenhum projeto de instalação encontrado. Clique em 'Criar Instalação' para iniciar."
              : "Nenhum projeto de instalação encontrado. É necessário um contrato assinado para criar um projeto de instalação."}
          </div>
        ) : (
          <div className="space-y-4">
            {projects.map((project) => (
              <div key={project.id} className="border rounded-md p-4">
                <div className="flex justify-between items-start">
                  <div>
                    <h3 className="font-medium">{project.title}</h3>
                    <div className="flex items-center mt-1 space-x-2">
                      <Badge variant="outline" className={getStatusBadgeColor(project.status)}>
                        {project.status}
                      </Badge>
                      <span className="text-sm text-gray-500">
                        {project.systemSize} kWp • {project.panelCount} painéis
                      </span>
                    </div>
                  </div>
                  <Link href={`/installation/projects/${project.id}`} passHref>
                    <Button variant="outline" size="sm" className="h-8">
                      <ExternalLink className="h-3.5 w-3.5 mr-1" />
                      Ver
                    </Button>
                  </Link>
                </div>

<div className="grid grid-cols-2 gap-4 mt-4">
                  <div>
                    <h4 className="text-sm text-gray-500">Local</h4>
                    <p className="text-sm">
                      {project.location.city}, {project.location.state}
                    </p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Datas</h4>
                    <p className="text-sm">
                      {formatDate(project.startDate || new Date())} - {formatDate(project.endDate || new Date())}
                    </p>
                  </div>
                </div>

{project.progress && (
                  <div className="mt-4">
                    <h4 className="text-sm text-gray-500">Progresso</h4>
                    <div className="w-full bg-gray-200 rounded-full h-2.5 mt-1">
                      <div
                        className="bg-green-600 h-2.5 rounded-full"
                        style={{ width: `${project.progress.percentage}%` }}
                      ></div>
                    </div>
                    <div className="flex justify-between mt-1">
                      <span className="text-xs text-gray-500">
                        {project.progress.completedTasks} de {project.progress.totalTasks} tarefas
                      </span>
                      <span className="text-xs font-medium">{project.progress.percentage}%</span>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/integration/components/convert-opportunity-to-installation.tsx"
"use client"

import { useState } from "react"
import { useSalesInstallationIntegration } from "../hooks/use-sales-installation-integration"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircle, CheckCircle2 } from "lucide-react"
import type { InstallationProject } from "@/modules/installation/types/installation-project"

interface ConvertOpportunityToInstallationProps {
  contractId: string
  userId: string
  disabled?: boolean
  onSuccess?: (project: InstallationProject) => void
}

export function ConvertOpportunityToInstallation({
  contractId,
  userId,
  disabled = false,
  onSuccess,
}: ConvertOpportunityToInstallationProps) {
  const [open, setOpen] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [success, setSuccess] = useState(false)
  const [project, setProject] = useState<InstallationProject | null>(null)

const { createInstallationFromContract } = useSalesInstallationIntegration()

const handleConvert = async () => {
    setLoading(true)
    setError(null)
    setSuccess(false)

try {
      const newProject = await createInstallationFromContract(contractId, userId)
      setProject(newProject)
      setSuccess(true)
      onSuccess?.(newProject)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Falha ao criar projeto de instalação")
    } finally {
      setLoading(false)
    }
  }

const handleClose = () => {
    if (success) {
      setOpen(false)
      setSuccess(false)
      setProject(null)
    }
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button disabled={disabled}>Converter para Instalação</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Criar Projeto de Instalação</DialogTitle>
          <DialogDescription>Isso criará um novo projeto de instalação baseado no contrato assinado.</DialogDescription>
        </DialogHeader>

{error && (
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>Erro</AlertTitle>
            <AlertDescription>{error}</AlertDescription>
          </Alert>
        )}

{success && project ? (
          <Alert className="border-green-200 bg-green-50">
            <CheckCircle2 className="h-4 w-4 text-green-600" />
            <AlertTitle className="text-green-800">Sucesso</AlertTitle>
            <AlertDescription className="text-green-700">
              Projeto de instalação criado com sucesso: {project.title}
            </AlertDescription>
          </Alert>
        ) : (
          <div className="py-4">
            <p>Ao criar um projeto de instalação, os seguintes dados serão transferidos do contrato:</p>
            <ul className="list-disc list-inside mt-2 space-y-1 text-sm">
              <li>Informações do cliente</li>
              <li>Endereço de instalação</li>
              <li>Tamanho do sistema</li>
              <li>Quantidade de equipamentos</li>
              <li>Datas estimadas</li>
            </ul>
            <p className="mt-4 text-sm text-gray-500">
              Você poderá editar todas essas informações após a criação do projeto.
            </p>
          </div>
        )}

<DialogFooter className="flex space-x-2 sm:justify-end">
          <Button variant="outline" onClick={() => setOpen(false)}>
            {success ? "Fechar" : "Cancelar"}
          </Button>
          {!success && (
            <Button onClick={handleConvert} disabled={loading}>
              {loading ? "Criando..." : "Criar Projeto"}
            </Button>
          )}
          {success && <Button onClick={handleClose}>Concluído</Button>}
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/api/integration/sales-installation/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { SalesInstallationIntegrationService } from "@/modules/integration/services/sales-installation-integration-service"

const integrationService = new SalesInstallationIntegrationService()

export async function POST(request: NextRequest) {
  try {
    const { contractId, userId } = await request.json()

if (!contractId) {
      return NextResponse.json({ error: "ID do contrato é obrigatório" }, { status: 400 })
    }

if (!userId) {
      return NextResponse.json({ error: "ID do usuário é obrigatório" }, { status: 400 })
    }

const project = await integrationService.createInstallationFromContract(contractId, userId)
    return NextResponse.json(project, { status: 201 })
  } catch (error) {
    console.error("Erro ao criar projeto de instalação:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Falha ao criar projeto de instalação" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/integration/sales-installation/sync/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { SalesInstallationIntegrationService } from "@/modules/integration/services/sales-installation-integration-service"

const integrationService = new SalesInstallationIntegrationService()

export async function POST(request: NextRequest) {
  try {
    const { contractId } = await request.json()

if (!contractId) {
      return NextResponse.json({ error: "ID do contrato é obrigatório" }, { status: 400 })
    }

const project = await integrationService.syncContractToInstallation(contractId)
    return NextResponse.json(project)
  } catch (error) {
    console.error("Erro ao sincronizar contrato com instalação:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Falha ao sincronizar contrato com instalação" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/integration/sales-installation/opportunity/[id]/installations/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { SalesInstallationIntegrationService } from "@/modules/integration/services/sales-installation-integration-service"

const integrationService = new SalesInstallationIntegrationService()

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const opportunityId = params.id

if (!opportunityId) {
      return NextResponse.json({ error: "ID da oportunidade é obrigatório" }, { status: 400 })
    }

const projects = await integrationService.getInstallationsByOpportunityId(opportunityId)
    return NextResponse.json(projects)
  } catch (error) {
    console.error("Erro ao buscar projetos de instalação:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Falha ao buscar projetos de instalação" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="app/api/integration/sales-installation/installation/[id]/opportunity/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { SalesInstallationIntegrationService } from "@/modules/integration/services/sales-installation-integration-service"

const integrationService = new SalesInstallationIntegrationService()

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const installationId = params.id

if (!installationId) {
      return NextResponse.json({ error: "ID do projeto de instalação é obrigatório" }, { status: 400 })
    }

const opportunity = await integrationService.getOpportunityByInstallationId(installationId)

if (!opportunity) {
      return NextResponse.json({ error: "Oportunidade não encontrada" }, { status: 404 })
    }

return NextResponse.json(opportunity)
  } catch (error) {
    console.error("Erro ao buscar oportunidade:", error)
    return NextResponse.json(
      { error: error instanceof Error ? error.message : "Falha ao buscar oportunidade" },
      { status: 500 },
    )
  }
}
[V0_FILE]typescriptreact:file="modules/sales/types/contract.ts"
export interface Contract {
  id: string
  opportunityId: string
  customerId: string
  title: string
  description?: string
  value: number
  startDate: Date
  endDate: Date
  status: ContractStatus
  terms: string
  signedAt?: Date
  signedBy?: string
  signatureUrl?: string
  installationAddress: {
    street: string
    city: string
    state: string
    zipCode: string
    coordinates?: {
      latitude: number
      longitude: number
    }
  }
  billingAddress: {
    street: string
    city: string
    state: string
    zipCode: string
  }
  paymentTerms: PaymentTerms
  systemSize: number
  panelCount?: number
  inverterCount?: number
  designProjectId?: string
  installationProjectId?: string // Referência ao projeto de instalação
  documents?: DocumentReference[]
  notes?: string
  createdAt: Date
  updatedAt: Date
  createdBy: string
  updatedBy?: string
  customFields?: Record<string, any>
}

export enum ContractStatus {
  DRAFT = "draft",
  SENT = "sent",
  NEGOTIATING = "negotiating",
  SIGNED = "signed",
  ACTIVE = "active",
  COMPLETED = "completed",
  CANCELED = "canceled",
  EXPIRED = "expired",
}

export interface PaymentTerms {
  method: PaymentMethod
  schedule: PaymentSchedule
  downPayment?: number
  installments?: number
  financingDetails?: FinancingDetails
}

export enum PaymentMethod {
  CASH = "cash",
  CREDIT_CARD = "credit_card",
  BANK_TRANSFER = "bank_transfer",
  FINANCING = "financing",
  LEASE = "lease",
}

export enum PaymentSchedule {
  UPFRONT = "upfront",
  MILESTONE = "milestone",
  MONTHLY = "monthly",
}

export interface FinancingDetails {
  provider: string
  term: number // em meses
  interestRate: number
  monthlyPayment: number
}

export interface DocumentReference {
  id: string
  name: string
  type: string
  url: string
  uploadedAt: Date
  uploadedBy: string
}

export interface ContractFilter {
  status?: ContractStatus[]
  dateRange?: {
    start: Date
    end: Date
  }
  valueRange?: {
    min: number
    max: number
  }
  search?: string
  customerId?: string
}
[V0_FILE]typescriptreact:file="app/installation/projects/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { InstallationProjectService } from "@/modules/installation/services/installation-project-service"
import { SalesInfoInInstallation } from "@/modules/integration/components/sales-info-in-installation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Skeleton } from "@/components/ui/skeleton"
import { AlertTriangle } from "lucide-react"
import type { InstallationProject } from "@/modules/installation/types/installation-project"

export default function ProjectDetailPage() {
  const params = useParams()
  const projectId = params.id as string
  const [project, setProject] = useState<InstallationProject | null>(null)
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchProject = async () => {
      setLoading(true)
      setError(null)
      try {
        const projectService = new InstallationProjectService()
        const data = await projectService.getProjectById(projectId)
        setProject(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Falha ao carregar projeto")
      } finally {
        setLoading(false)
      }
    }

if (projectId) {
      fetchProject()
    }
  }, [projectId])

if (loading) {
    return (
      <div className="container mx-auto py-6 space-y-6">
        <Skeleton className="h-12 w-3/4" />
        <Skeleton className="h-[200px] w-full" />
        <Skeleton className="h-[400px] w-full" />
      </div>
    )
  }

if (error) {
    return (
      <div className="container mx-auto py-6">
        <Card>
          <CardContent className="pt-6">
            <div className="flex items-center text-red-500">
              <AlertTriangle className="h-5 w-5 mr-2" />
              <span>{error}</span>
            </div>
          </CardContent>
        </Card>
      </div>
    )
  }

if (!project) {
    return (
      <div className="container mx-auto py-6">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center py-8 text-gray-500">Projeto não encontrado</div>
          </CardContent>
        </Card>
      </div>
    )
  }

return (
    <div className="container mx-auto py-6 space-y-6">
      <div>
        <h1 className="text-3xl font-bold">{project.title}</h1>
        <p className="text-gray-500 mt-1">ID: {project.id}</p>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Detalhes do Projeto</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-medium">Descrição</h3>
                  <p className="mt-1">{project.description || "Sem descrição"}</p>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <h4 className="text-sm text-gray-500">Status</h4>
                    <p className="font-medium">{project.status}</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Prioridade</h4>
                    <p className="font-medium">{project.priority}</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Tamanho do Sistema</h4>
                    <p className="font-medium">{project.systemSize} kWp</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Equipamentos</h4>
                    <p className="font-medium">
                      {project.panelCount} painéis, {project.inverterCount} inversores
                    </p>
                  </div>
                </div>

<div>
                  <h4 className="text-sm text-gray-500">Localização</h4>
                  <p className="font-medium">
                    {project.location.address}, {project.location.city}, {project.location.state},{" "}
                    {project.location.zipCode}
                  </p>
                </div>

{project.notes && (
                  <div>
                    <h4 className="text-sm text-gray-500">Observações</h4>
                    <p className="mt-1">{project.notes}</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

<div className="mt-6">
            <Tabs defaultValue="tasks">
              <TabsList>
                <TabsTrigger value="tasks">Tarefas</TabsTrigger>
                <TabsTrigger value="schedule">Cronograma</TabsTrigger>
                <TabsTrigger value="equipment">Equipamentos</TabsTrigger>
                <TabsTrigger value="inspections">Inspeções</TabsTrigger>
                <TabsTrigger value="documents">Documentos</TabsTrigger>
              </TabsList>
              <TabsContent value="tasks">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center py-8 text-gray-500">Funcionalidade de tarefas em desenvolvimento</div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="schedule">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center py-8 text-gray-500">
                      Funcionalidade de cronograma em desenvolvimento
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="equipment">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center py-8 text-gray-500">
                      Funcionalidade de equipamentos em desenvolvimento
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="inspections">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center py-8 text-gray-500">Funcionalidade de inspeções em desenvolvimento</div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="documents">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center py-8 text-gray-500">
                      Funcionalidade de documentos em desenvolvimento
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>

<div className="space-y-6">
          {/* Informações de Vendas */}
          <SalesInfoInInstallation installationId={projectId} />

{/* Progresso */}
          <Card>
            <CardHeader>
              <CardTitle>Progresso</CardTitle>
            </CardHeader>
            <CardContent>
              {project.progress ? (
                <div>
                  <div className="flex justify-between mb-2">
                    <span className="text-sm text-gray-500">Progresso Geral</span>
                    <span className="font-medium">{project.progress.percentage}%</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2.5">
                    <div
                      className="bg-green-600 h-2.5 rounded-full"
                      style={{ width: `${project.progress.percentage}%` }}
                    ></div>
                  </div>
                  <div className="mt-4">
                    <div className="text-sm text-gray-500 mb-2">Detalhes</div>
                    <div className="space-y-2">
                      <div className="flex justify-between">
                        <span className="text-sm">Tarefas Concluídas</span>
                        <span className="text-sm font-medium">
                          {project.progress.completedTasks} / {project.progress.totalTasks}
                        </span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Dias Restantes</span>
                        <span className="text-sm font-medium">{project.progress.daysRemaining || "N/A"}</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-sm">Última Atualização</span>
                        <span className="text-sm font-medium">
                          {project.progress.lastUpdated
                            ? new Date(project.progress.lastUpdated).toLocaleDateString()
                            : "N/A"}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="text-center py-4 text-gray-500">Nenhum dado de progresso disponível</div>
              )}
            </CardContent>
          </Card>

{/* Equipe */}
          <Card>
            <CardHeader>
              <CardTitle>Equipe</CardTitle>
            </CardHeader>
            <CardContent>
              {project.teams && project.teams.length > 0 ? (
                <div className="space-y-4">
                  {project.teams.map((team) => (
                    <div key={team.id} className="flex items-center space-x-3">
                      <div className="flex-shrink-0">
                        <div className="h-10 w-10 rounded-full bg-gray-200 flex items-center justify-center">
                          <span className="font-medium text-gray-600">{team.name.charAt(0)}</span>
                        </div>
                      </div>
                      <div>
                        <p className="font-medium">{team.name}</p>
                        <p className="text-sm text-gray-500">{team.members?.length || 0} membros</p>
                      </div>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="text-center py-4 text-gray-500">Nenhuma equipe atribuída</div>
              )}
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/contracts/[id]/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useParams } from "next/navigation"
import { ContractService } from "@/modules/sales/services/contract-service"
import { InstallationInfoInSales } from "@/modules/integration/components/installation-info-in-sales"
import { ConvertOpportunityToInstallation } from "@/modules/integration/components/convert-opportunity-to-installation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Skeleton } from "@/components/ui/skeleton"
import { AlertTriangle } from "lucide-react"
import { formatCurrency } from "@/modules/sales/utils/format-utils"
import type { Contract } from "@/modules/sales/types/contract"
import type { InstallationProject } from "@/modules/installation/types/installation-project"

export default function ContractDetailPage() {
  const params = useParams()
  const contractId = params.id as string
  const [contract, setContract] = useState<Contract | null>(null)
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchContract = async () => {
      setLoading(true)
      setError(null)
      try {
        const contractService = new ContractService()
        const data = await contractService.getContractById(contractId)
        setContract(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Falha ao carregar contrato")
      } finally {
        setLoading(false)
      }
    }

if (contractId) {
      fetchContract()
    }
  }, [contractId])

const handleInstallationCreated = (project: InstallationProject) => {
    // Atualizar o contrato com a referência ao projeto de instalação
    if (contract) {
      setContract({
        ...contract,
        installationProjectId: project.id,
      })
    }
  }

if (!contract) {
    return (
      <div className="container mx-auto py-6">
        <Card>
          <CardContent className="pt-6">
            <div className="text-center py-8 text-gray-500">Contrato não encontrado</div>
          </CardContent>
        </Card>
      </div>
    )
  }

const canCreateInstallation = contract.status === "SIGNED" && contract.signedAt && !contract.installationProjectId

return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold">{contract.title}</h1>
          <p className="text-gray-500 mt-1">ID: {contract.id}</p>
        </div>
        {canCreateInstallation && (
          <ConvertOpportunityToInstallation
            contractId={contractId}
            userId={contract.createdBy}
            onSuccess={handleInstallationCreated}
          />
        )}
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <Card>
            <CardHeader>
              <CardTitle>Detalhes do Contrato</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="font-medium">Descrição</h3>
                  <p className="mt-1">{contract.description || "Sem descrição"}</p>
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <h4 className="text-sm text-gray-500">Valor</h4>
                    <p className="font-medium">{formatCurrency(contract.value)}</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Status</h4>
                    <p className="font-medium">{contract.status}</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Data de Início</h4>
                    <p className="font-medium">{contract.startDate.toLocaleDateString()}</p>
                  </div>
                  <div>
                    <h4 className="text-sm text-gray-500">Data de Término</h4>
                    <p className="font-medium">{contract.endDate.toLocaleDateString()}</p>
                  </div>
                </div>

<div>
                  <h4 className="text-sm text-gray-500">Endereço de Instalação</h4>
                  <p className="font-medium">
                    {contract.installationAddress.street}, {contract.installationAddress.city},{" "}
                    {contract.installationAddress.state}, {contract.installationAddress.zipCode}
                  </p>
                </div>

<div>
                  <h4 className="text-sm text-gray-500">Detalhes do Sistema</h4>
                  <p className="font-medium">
                    {contract.systemSize} kWp • {contract.panelCount || "N/A"} painéis •{" "}
                    {contract.inverterCount || "N/A"} inversores
                  </p>
                </div>

{contract.notes && (
                  <div>
                    <h4 className="text-sm text-gray-500">Observações</h4>
                    <p className="mt-1">{contract.notes}</p>
                  </div>
                )}
              </div>
            </CardContent>
          </Card>

<div className="mt-6">
            <Tabs defaultValue="terms">
              <TabsList>
                <TabsTrigger value="terms">Termos</TabsTrigger>
                <TabsTrigger value="payment">Pagamento</TabsTrigger>
                <TabsTrigger value="documents">Documentos</TabsTrigger>
                <TabsTrigger value="signatures">Assinaturas</TabsTrigger>
              </TabsList>
              <TabsContent value="terms">
                <Card>
                  <CardContent className="pt-6">
                    <div className="prose max-w-none">
                      <div dangerouslySetInnerHTML={{ __html: contract.terms }} />
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="payment">
                <Card>
                  <CardContent className="pt-6">
                    <div className="space-y-4">
                      <div>
                        <h3 className="font-medium">Método de Pagamento</h3>
                        <p className="mt-1">{contract.paymentTerms.method}</p>
                      </div>
                      <div>
                        <h3 className="font-medium">Cronograma de Pagamento</h3>
                        <p className="mt-1">{contract.paymentTerms.schedule}</p>
                      </div>
                      {contract.paymentTerms.downPayment && (
                        <div>
                          <h3 className="font-medium">Entrada</h3>
                          <p className="mt-1">{formatCurrency(contract.paymentTerms.downPayment)}</p>
                        </div>
                      )}
                      {contract.paymentTerms.installments && (
                        <div>
                          <h3 className="font-medium">Parcelas</h3>
                          <p className="mt-1">{contract.paymentTerms.installments}</p>
                        </div>
                      )}
                      {contract.paymentTerms.financingDetails && (
                        <div>
                          <h3 className="font-medium">Detalhes do Financiamento</h3>
                          <div className="mt-1 space-y-2">
                            <p>Provedor: {contract.paymentTerms.financingDetails.provider}</p>
                            <p>Prazo: {contract.paymentTerms.financingDetails.term} meses</p>
                            <p>Taxa de Juros: {contract.paymentTerms.financingDetails.interestRate}%</p>
                            <p>
                              Pagamento Mensal: {formatCurrency(contract.paymentTerms.financingDetails.monthlyPayment)}
                            </p>
                          </div>
                        </div>
                      )}
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="documents">
                <Card>
                  <CardContent className="pt-6">
                    {contract.documents && contract.documents.length > 0 ? (
                      <div className="space-y-4">
                        {contract.documents.map((doc) => (
                          <div key={doc.id} className="flex items-center justify-between">
                            <div>
                              <p className="font-medium">{doc.name}</p>
                              <p className="text-sm text-gray-500">
                                {doc.type} • Enviado em {doc.uploadedAt.toLocaleDateString()}
                              </p>
                            </div>
                            <a
                              href={doc.url}
                              target="_blank"
                              rel="noopener noreferrer"
                              className="text-blue-600 hover:text-blue-800"
                            >
                              Visualizar
                            </a>
                          </div>
                        ))}
                      </div>
                    ) : (
                      <div className="text-center py-4 text-gray-500">Nenhum documento disponível</div>
                    )}
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="signatures">
                <Card>
                  <CardContent className="pt-6">
                    {contract.signedAt ? (
                      <div className="space-y-4">
                        <div>
                          <h3 className="font-medium">Assinado por</h3>
                          <p className="mt-1">{contract.signedBy || "Não especificado"}</p>
                        </div>
                        <div>
                          <h3 className="font-medium">Data de Assinatura</h3>
                          <p className="mt-1">{contract.signedAt.toLocaleDateString()}</p>
                        </div>
                        {contract.signatureUrl && (
                          <div>
                            <h3 className="font-medium">Assinatura</h3>
                            <div className="mt-2 border rounded p-4">
                              <img
                                src={contract.signatureUrl || "/placeholder.svg"}
                                alt="Assinatura"
                                className="max-h-32 mx-auto"
                              />
                            </div>
                          </div>
                        )}
                      </div>
                    ) : (
                      <div className="text-center py-4 text-gray-500">Contrato não assinado</div>
                    )}
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
        </div>

<div className="space-y-6">
          {/* Informações de Instalação */}
          <InstallationInfoInSales
            opportunityId={contract.opportunityId}
            contractId={contractId}
            userId={contract.createdBy}
            onCreateInstallation={handleInstallationCreated}
          />

{/* Cliente */}
          <Card>
            <CardHeader>
              <CardTitle>Cliente</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center py-4 text-gray-500">Informações do cliente em desenvolvimento</div>
            </CardContent>
          </Card>

{/* Oportunidade */}
          <Card>
            <CardHeader>
              <CardTitle>Oportunidade</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-center py-4 text-gray-500">Informações da oportunidade em desenvolvimento</div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/integration/components/index.ts"
export * from "./sales-info-in-installation"
export * from "./installation-info-in-sales"
export * from "./convert-opportunity-to-installation"
[V0_FILE]typescriptreact:file="modules/integration/hooks/index.ts"
export * from "./use-sales-installation-integration"
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-viewer.tsx"
"use client"

import { useState, useEffect } from "react"
import { useDocument } from "../../hooks/use-documents"
import { DocumentStatusBadge } from "./document-status-badge"
import { DocumentSignatureForm } from "./document-signature-form"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Skeleton } from "@/components/ui/skeleton"
import { Badge } from "@/components/ui/badge"
import { AlertTriangle, Download, Calendar, User, FileText, Clock } from "lucide-react"
import type { DocumentStatus } from "../../types/document"

interface DocumentViewerProps {
  documentId: string
  onStatusChange?: (status: DocumentStatus) => void
}

export function DocumentViewer({ documentId, onStatusChange }: DocumentViewerProps) {
  const { document, loading, error, refreshDocument } = useDocument(documentId)
  const [activeTab, setActiveTab] = useState("preview")
  const [showSignatureForm, setShowSignatureForm] = useState(false)

useEffect(() => {
    // Se o documento for uma imagem, PDF ou outro tipo visualizável, definir a aba ativa como "preview"
    // Caso contrário, definir como "details"
    if (document) {
      const fileType = document.fileType.toLowerCase()
      if (
        fileType.includes("image") ||
        fileType.endsWith("pdf") ||
        fileType.endsWith("txt") ||
        fileType.endsWith("html")
      ) {
        setActiveTab("preview")
      } else {
        setActiveTab("details")
      }
    }
  }, [document])

const handleDownload = async () => {
    if (!document) return

try {
      const response = await fetch(`/api/installation/documents/${documentId}/download`)
      if (!response.ok) throw new Error("Erro ao baixar documento")

const blob = await response.blob()
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.style.display = "none"
      a.href = url
      a.download = document.name
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
    } catch (error) {
      console.error("Erro ao baixar documento:", error)
    }
  }

const handleStatusChange = async (status: DocumentStatus) => {
    if (!document) return

try {
      const response = await fetch(`/api/installation/documents/${documentId}/status`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ status }),
      })

if (!response.ok) throw new Error("Erro ao atualizar status")

refreshDocument()
      if (onStatusChange) onStatusChange(status)
    } catch (error) {
      console.error("Erro ao atualizar status:", error)
    }
  }

const handleSignatureSubmit = async () => {
    refreshDocument()
    setShowSignatureForm(false)
  }

if (loading) {
    return (
      <div className="space-y-4">
        <Skeleton className="h-8 w-3/4" />
        <Skeleton className="h-[400px] w-full" />
      </div>
    )
  }

if (error) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center text-red-500">
            <AlertTriangle className="h-5 w-5 mr-2" />
            <span>Erro ao carregar documento: {error.message}</span>
          </div>
        </CardContent>
      </Card>
    )
  }

if (!document) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="text-center py-8 text-gray-500">Documento não encontrado</div>
        </CardContent>
      </Card>
    )
  }

const formatDate = (date: Date) => {
    return new Date(date).toLocaleDateString("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const renderPreview = () => {
    const fileType = document.fileType.toLowerCase()

if (
      fileType.includes("image") ||
      fileType.endsWith("png") ||
      fileType.endsWith("jpg") ||
      fileType.endsWith("jpeg") ||
      fileType.endsWith("gif")
    ) {
      return (
        <div className="flex justify-center p-4 bg-gray-50 rounded-md">
          <img
            src={document.url || "/placeholder.svg"}
            alt={document.name}
            className="max-w-full max-h-[600px] object-contain"
          />
        </div>
      )
    } else if (fileType.endsWith("pdf")) {
      return (
        <div className="h-[600px] w-full">
          <iframe
            src={`${document.url}#view=FitH`}
            className="w-full h-full border-0 rounded-md"
            title={document.name}
          />
        </div>
      )
    } else if (fileType.includes("text") || fileType.endsWith("txt")) {
      return (
        <div className="p-4 bg-gray-50 rounded-md h-[400px] overflow-auto">
          <p className="text-sm whitespace-pre-wrap">
            {/* Aqui seria necessário carregar o conteúdo do texto */}
            Conteúdo do documento de texto não disponível para visualização direta. Por favor, faça o download para
            visualizar.
          </p>
        </div>
      )
    } else {
      return (
        <div className="p-8 bg-gray-50 rounded-md text-center">
          <FileText className="h-16 w-16 text-gray-400 mx-auto mb-4" />
          <p className="text-gray-500">Visualização não disponível para este tipo de arquivo ({document.fileType}).</p>
          <Button onClick={handleDownload} className="mt-4">
            <Download className="h-4 w-4 mr-2" />
            Baixar Arquivo
          </Button>
        </div>
      )
    }
  }

return (
    <div className="space-y-6">
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold">{document.name}</h1>
          <div className="flex flex-wrap gap-2 mt-2">
            <DocumentStatusBadge status={document.status} />
            <Badge variant="outline">{document.type}</Badge>
            <Badge variant="outline">{document.category}</Badge>
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleDownload}>
            <Download className="h-4 w-4 mr-2" />
            Baixar
          </Button>
          {document.status === "DRAFT" && (
            <Button onClick={() => handleStatusChange("PENDING_APPROVAL")}>Enviar para Aprovação</Button>
          )}
          {document.status === "PENDING_APPROVAL" && (
            <>
              <Button
                variant="outline"
                onClick={() => handleStatusChange("REJECTED")}
                className="text-red-500 border-red-200 hover:bg-red-50"
              >
                Rejeitar
              </Button>
              <Button onClick={() => handleStatusChange("APPROVED")} className="bg-green-600 hover:bg-green-700">
                Aprovar
              </Button>
            </>
          )}
        </div>
      </div>

{document.description && (
        <Card>
          <CardContent className="pt-6">
            <p className="text-gray-700">{document.description}</p>
          </CardContent>
        </Card>
      )}

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="preview">Visualização</TabsTrigger>
          <TabsTrigger value="details">Detalhes</TabsTrigger>
          <TabsTrigger value="signatures">Assinaturas</TabsTrigger>
        </TabsList>

<TabsContent value="preview" className="mt-4">
          <Card>
            <CardContent className="pt-6">{renderPreview()}</CardContent>
          </Card>
        </TabsContent>

<TabsContent value="details" className="mt-4">
          <Card>
            <CardContent className="pt-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-sm font-medium text-gray-500 mb-2">Informações do Arquivo</h3>
                  <div className="space-y-3">
                    <div className="flex items-start gap-2">
                      <FileText className="h-4 w-4 text-gray-400 mt-0.5" />
                      <div>
                        <p className="text-sm font-medium">Tipo de Arquivo</p>
                        <p className="text-sm text-gray-500">{document.fileType}</p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <div className="h-4 w-4 flex items-center justify-center text-gray-400 mt-0.5">
                        <span className="text-xs">KB</span>
                      </div>
                      <div>
                        <p className="text-sm font-medium">Tamanho</p>
                        <p className="text-sm text-gray-500">
                          {document.fileSize < 1024
                            ? `${document.fileSize} B`
                            : document.fileSize < 1024 * 1024
                              ? `${(document.fileSize / 1024).toFixed(1)} KB`
                              : `${(document.fileSize / (1024 * 1024)).toFixed(1)} MB`}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-start gap-2">
                      <Calendar className="h-4 w-4 text-gray-400 mt-0.5" />
                      <div>
                        <p className="text-sm font-medium">Data de Upload</p>
                        <p className="text-sm text-gray-500">{formatDate(document.uploadedAt)}</p>
                      </div>
                    </div>
                    {document.updatedAt && (
                      <div className="flex items-start gap-2">
                        <Clock className="h-4 w-4 text-gray-400 mt-0.5" />
                        <div>
                          <p className="text-sm font-medium">Última Atualização</p>
                          <p className="text-sm text-gray-500">{formatDate(document.updatedAt)}</p>
                        </div>
                      </div>
                    )}
                    <div className="flex items-start gap-2">
                      <User className="h-4 w-4 text-gray-400 mt-0.5" />
                      <div>
                        <p className="text-sm font-medium">Enviado por</p>
                        <p className="text-sm text-gray-500">{document.uploadedBy}</p>
                      </div>
                    </div>
                  </div>
                </div>

<div>
                  <h3 className="text-sm font-medium text-gray-500 mb-2">Metadados</h3>
                  <div className="space-y-3">
                    <div>
                      <p className="text-sm font-medium">Versão</p>
                      <p className="text-sm text-gray-500">{document.version}</p>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Visibilidade</p>
                      <p className="text-sm text-gray-500">
                        {document.isPublic ? "Público (visível para o cliente)" : "Interno"}
                      </p>
                    </div>
                    {document.expiresAt && (
                      <div>
                        <p className="text-sm font-medium">Data de Expiração</p>
                        <p className="text-sm text-gray-500">{formatDate(document.expiresAt)}</p>
                      </div>
                    )}
                    {document.tags && document.tags.length > 0 && (
                      <div>
                        <p className="text-sm font-medium">Tags</p>
                        <div className="flex flex-wrap gap-1 mt-1">
                          {document.tags.map((tag) => (
                            <Badge key={tag} variant="secondary" className="text-xs">
                              {tag}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                    {document.accessRoles && document.accessRoles.length > 0 && (
                      <div>
                        <p className="text-sm font-medium">Perfis de Acesso</p>
                        <div className="flex flex-wrap gap-1 mt-1">
                          {document.accessRoles.map((role) => (
                            <Badge key={role} variant="outline" className="text-xs">
                              {role}
                            </Badge>
                          ))}
                        </div>
                      </div>
                    )}
                    {document.metadata && Object.keys(document.metadata).length > 0 && (
                      <div>
                        <p className="text-sm font-medium">Metadados Adicionais</p>
                        <div className="mt-1 text-sm text-gray-500">
                          <pre className="whitespace-pre-wrap bg-gray-50 p-2 rounded text-xs">
                            {JSON.stringify(document.metadata, null, 2)}
                          </pre>
                        </div>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="signatures" className="mt-4">
          <Card>
            {showSignatureForm ? (
              <CardContent className="pt-6">
                <DocumentSignatureForm
                  documentId={document.id}
                  onSuccess={handleSignatureSubmit}
                  onCancel={() => setShowSignatureForm(false)}
                />
              </CardContent>
            ) : (
              <>
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <CardTitle>Assinaturas</CardTitle>
                    <Button size="sm" onClick={() => setShowSignatureForm(true)}>
                      Adicionar Assinatura
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  {document.signatures && document.signatures.length > 0 ? (
                    <div className="space-y-4">
                      {document.signatures.map((signature) => (
                        <div
                          key={signature.id}
                          className="border rounded-md p-4 flex flex-col sm:flex-row justify-between gap-4"
                        >
                          <div>
                            <p className="font-medium">{signature.name}</p>
                            <p className="text-sm text-gray-500">{signature.role}</p>
                            <p className="text-xs text-gray-400 mt-1">{formatDate(signature.date)}</p>
                          </div>
                          <div className="flex items-center">
                            <div className="border p-2 rounded bg-gray-50">
                              <img
                                src={signature.signature || "/placeholder.svg"}
                                alt={`Assinatura de ${signature.name}`}
                                className="h-12 object-contain"
                              />
                            </div>
                            <Badge variant={signature.verified ? "default" : "outline"} className="ml-2">
                              {signature.verified ? "Verificado" : "Não verificado"}
                            </Badge>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <div className="text-center py-8 text-gray-500">
                      <p>Nenhuma assinatura registrada</p>
                      <Button variant="link" onClick={() => setShowSignatureForm(true)} className="mt-2">
                        Adicionar assinatura
                      </Button>
                    </div>
                  )}
                </CardContent>
              </>
            )}
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-signature-form.tsx"
"use client"

import type React from "react"

import { useState, useRef, useEffect } from "react"
import { DocumentService } from "../../services/document-service"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { AlertCircle } from "lucide-react"

interface DocumentSignatureFormProps {
  documentId: string
  onSuccess?: () => void
  onCancel?: () => void
}

export function DocumentSignatureForm({ documentId, onSuccess, onCancel }: DocumentSignatureFormProps) {
  const [name, setName] = useState("")
  const [role, setRole] = useState("")
  const [isDrawing, setIsDrawing] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const contextRef = useRef<CanvasRenderingContext2D | null>(null)

const documentService = new DocumentService()

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

// Configurar o canvas para desenho
    canvas.width = canvas.offsetWidth * 2
    canvas.height = canvas.offsetHeight * 2
    canvas.style.width = `${canvas.offsetWidth}px`
    canvas.style.height = `${canvas.offsetHeight}px`

const context = canvas.getContext("2d")
    if (!context) return

context.scale(2, 2)
    context.lineCap = "round"
    context.strokeStyle = "black"
    context.lineWidth = 2
    contextRef.current = context
  }, [])

const startDrawing = ({ nativeEvent }: React.MouseEvent | React.TouchEvent) => {
    const { offsetX, offsetY } = getCoordinates(nativeEvent)

if (contextRef.current) {
      contextRef.current.beginPath()
      contextRef.current.moveTo(offsetX, offsetY)
      setIsDrawing(true)
    }
  }

const finishDrawing = () => {
    if (contextRef.current) {
      contextRef.current.closePath()
      setIsDrawing(false)
    }
  }

const draw = ({ nativeEvent }: React.MouseEvent | React.TouchEvent) => {
    if (!isDrawing) return

const { offsetX, offsetY } = getCoordinates(nativeEvent)

if (contextRef.current) {
      contextRef.current.lineTo(offsetX, offsetY)
      contextRef.current.stroke()
    }
  }

const getCoordinates = (event: React.MouseEvent | React.TouchEvent) => {
    const canvas = canvasRef.current
    if (!canvas) return { offsetX: 0, offsetY: 0 }

if ("touches" in event) {
      // Evento de toque
      const touch = event.touches[0]
      const rect = canvas.getBoundingClientRect()
      return {
        offsetX: touch.clientX - rect.left,
        offsetY: touch.clientY - rect.top,
      }
    } else {
      // Evento de mouse
      return {
        offsetX: event.nativeEvent.offsetX,
        offsetY: event.nativeEvent.offsetY,
      }
    }
  }

const clearCanvas = () => {
    const canvas = canvasRef.current
    const context = contextRef.current
    if (!canvas || !context) return

context.clearRect(0, 0, canvas.width, canvas.height)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!name.trim()) {
      setError("Por favor, informe seu nome")
      return
    }

if (!role.trim()) {
      setError("Por favor, informe seu cargo/função")
      return
    }

const canvas = canvasRef.current
    if (!canvas) {
      setError("Erro ao capturar assinatura")
      return
    }

// Verificar se a assinatura foi desenhada
    const context = canvas.getContext("2d")
    if (!context) {
      setError("Erro ao capturar assinatura")
      return
    }

const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data
    const isEmpty = !imageData.some((channel) => channel !== 0)

if (isEmpty) {
      setError("Por favor, desenhe sua assinatura")
      return
    }

setLoading(true)
    setError(null)

try {
      const signatureDataUrl = canvas.toDataURL("image/png")

await documentService.addSignature(documentId, {
        name,
        role,
        signature: signatureDataUrl,
        verified: true,
        verificationMethod: "manual",
      })

if (onSuccess) onSuccess()
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao adicionar assinatura")
    } finally {
      setLoading(false)
    }
  }

return (
    <div className="space-y-4">
      <h3 className="text-lg font-medium">Adicionar Assinatura</h3>

{error && (
        <div className="p-3 bg-red-50 text-red-600 rounded-md text-sm flex items-center">
          <AlertCircle className="h-4 w-4 mr-2" />
          {error}
        </div>
      )}

<form onSubmit={handleSubmit} className="space-y-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="space-y-2">
            <Label htmlFor="name">Nome Completo</Label>
            <Input
              id="name"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="Seu nome completo"
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="role">Cargo/Função</Label>
            <Input
              id="role"
              value={role}
              onChange={(e) => setRole(e.target.value)}
              placeholder="Ex: Técnico, Gerente, Cliente"
              required
            />
          </div>
        </div>

<div className="space-y-2">
          <Label>Assinatura</Label>
          <div className="border-2 border-dashed rounded-md p-2 bg-gray-50">
            <canvas
              ref={canvasRef}
              onMouseDown={startDrawing}
              onMouseUp={finishDrawing}
              onMouseMove={draw}
              onMouseLeave={finishDrawing}
              onTouchStart={startDrawing}
              onTouchEnd={finishDrawing}
              onTouchMove={draw}
              className="w-full h-32 bg-white rounded touch-none"
              style={{ touchAction: "none" }}
            />
          </div>
          <p className="text-xs text-gray-500">Desenhe sua assinatura no campo acima usando o mouse ou toque.</p>
          <Button type="button" variant="outline" size="sm" onClick={clearCanvas} className="mt-2">
            Limpar Assinatura
          </Button>
        </div>

<div className="flex justify-end gap-2 pt-2">
          <Button type="button" variant="outline" onClick={onCancel} disabled={loading}>
            Cancelar
          </Button>
          <Button type="submit" disabled={loading}>
            {loading ? "Salvando..." : "Salvar Assinatura"}
          </Button>
        </div>
      </form>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-version-history.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { DocumentService } from "../../services/document-service"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { AlertTriangle, Download, ArrowLeft, Upload, Clock, User } from "lucide-react"
import type { Document } from "../../types/document"

interface DocumentVersionHistoryProps {
  documentId: string
  onBack?: () => void
}

export function DocumentVersionHistory({ documentId, onBack }: DocumentVersionHistoryProps) {
  const [versions, setVersions] = useState<Document[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [uploadingVersion, setUploadingVersion] = useState(false)
  const documentService = new DocumentService()

useEffect(() => {
    const fetchVersions = async () => {
      setLoading(true)
      setError(null)
      try {
        const data = await documentService.getDocumentVersions(documentId)
        setVersions(data)
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro ao buscar versões do documento")
      } finally {
        setLoading(false)
      }
    }

fetchVersions()
  }, [documentId, documentService])

const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files || !e.target.files[0]) return

const file = e.target.files[0]
    setUploadingVersion(true)
    setError(null)

try {
      await documentService.createDocumentVersion(documentId, file)

// Recarregar as versões
      const data = await documentService.getDocumentVersions(documentId)
      setVersions(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao criar nova versão")
    } finally {
      setUploadingVersion(false)
      // Limpar o input de arquivo
      e.target.value = ""
    }
  }

const handleDownload = async (version: Document) => {
    try {
      await documentService.downloadDocument(version.id)
    } catch (error) {
      console.error("Erro ao baixar versão:", error)
    }
  }

const formatFileSize = (bytes: number) => {
    if (bytes < 1024) return `${bytes} B`
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  }

return (
    <div className="space-y-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center">
          {onBack && (
            <Button variant="ghost" size="sm" onClick={onBack} className="mr-2">
              <ArrowLeft className="h-4 w-4 mr-1" />
              Voltar
            </Button>
          )}
          <h2 className="text-xl font-bold">Histórico de Versões</h2>
        </div>

<div>
          <Button
            variant="outline"
            size="sm"
            onClick={() => document.getElementById("upload-version")?.click()}
            disabled={uploadingVersion}
          >
            <Upload className="h-4 w-4 mr-2" />
            {uploadingVersion ? "Enviando..." : "Nova Versão"}
          </Button>
          <input type="file" id="upload-version" className="hidden" onChange={handleFileChange} />
        </div>
      </div>

{error && (
        <div className="p-3 bg-red-50 text-red-600 rounded-md text-sm flex items-center">
          <AlertTriangle className="h-4 w-4 mr-2" />
          {error}
        </div>
      )}

{loading ? (
        <Card>
          <CardContent className="pt-6">
            <div className="space-y-4">
              {[...Array(3)].map((_, i) => (
                <div key={i} className="flex justify-between items-center p-2 border-b">
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-24" />
                    <Skeleton className="h-3 w-32" />
                  </div>
                  <Skeleton className="h-8 w-20" />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ) : versions.length > 0 ? (
        <Card>
          <CardHeader>
            <CardTitle>Versões do Documento</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {versions.map((version, index) => (
                <div
                  key={version.id}
                  className={`p-4 rounded-md ${index === 0 ? "bg-blue-50 border border-blue-100" : "border"}`}
                >
                  <div className="flex justify-between items-start">
                    <div>
                      <div className="flex items-center">
                        <span className="font-medium">
                          {index === 0 ? "Versão Atual" : `Versão ${versions.length - index}`}
                        </span>
                        {index === 0 && (
                          <span className="ml-2 text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">Atual</span>
                        )}
                      </div>
                      <div className="text-sm text-gray-500 mt-1 flex items-center">
                        <Clock className="h-3 w-3 mr-1" />
                        {formatDate(version.uploadedAt)}
                      </div>
                      <div className="text-sm text-gray-500 mt-1 flex items-center">
                        <User className="h-3 w-3 mr-1" />
                        {version.uploadedBy}
                      </div>
                      <div className="text-xs text-gray-400 mt-2">
                        {formatFileSize(version.fileSize)} • {version.fileType}
                      </div>
                    </div>
                    <Button size="sm" variant="outline" onClick={() => handleDownload(version)}>
                      <Download className="h-4 w-4 mr-1" />
                      Baixar
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ) : (
        <Card>
          <CardContent className="pt-6">
            <div className="text-center py-8 text-gray-500">
              <p>Nenhuma versão encontrada para este documento</p>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/index.ts"
export * from "./document-list"
export * from "./document-card"
export * from "./document-status-badge"
export * from "./document-upload"
export * from "./document-filter"
export * from "./document-viewer"
export * from "./document-signature-form"
export * from "./document-version-history"
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-list.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination"
import {
  FileText,
  Download,
  Trash2,
  MoreVertical,
  Eye,
  Edit,
  History,
  CheckCircle,
  XCircle,
  Filter,
  Plus,
  Search,
} from "lucide-react"
import { useDocuments } from "../../hooks/use-documents"
import { DocumentStatusBadge } from "./document-status-badge"
import { DocumentFilter } from "./document-filter"
import { formatDate } from "../../utils/date-utils"
import { formatFileSize } from "../../utils/format-utils"

interface DocumentListProps {
  projectId?: string
  showFilters?: boolean
  showPagination?: boolean
  showSearch?: boolean
  limit?: number
}

export function DocumentList({
  projectId,
  showFilters = true,
  showPagination = true,
  showSearch = true,
  limit,
}: DocumentListProps) {
  const router = useRouter()
  const [searchTerm, setSearchTerm] = useState("")
  const [currentPage, setCurrentPage] = useState(1)
  const [showFilterPanel, setShowFilterPanel] = useState(false)
  const itemsPerPage = limit || 10

const {
    documents,
    loading,
    error,
    fetchDocuments,
    deleteDocument,
    downloadDocument,
    updateDocumentStatus,
    updateFilter,
  } = useDocuments(projectId ? { projectId } : undefined)

const filteredDocuments = documents.filter(
    (doc) =>
      doc.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doc.description?.toLowerCase().includes(searchTerm.toLowerCase()) ||
      doc.tags?.some((tag) => tag.toLowerCase().includes(searchTerm.toLowerCase())),
  )

const paginatedDocuments = filteredDocuments.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)

const totalPages = Math.ceil(filteredDocuments.length / itemsPerPage)

const handlePageChange = (page: number) => {
    setCurrentPage(page)
  }

const handleViewDocument = (id: string) => {
    router.push(`/installation/documents/${id}`)
  }

const handleEditDocument = (id: string) => {
    router.push(`/installation/documents/${id}?edit=true`)
  }

const handleViewHistory = (id: string) => {
    router.push(`/installation/documents/${id}/history`)
  }

const handleDownloadDocument = async (id: string) => {
    const response = await downloadDocument(id)
    if (response.success && response.data) {
      // Create a download link and trigger download
      const url = window.URL.createObjectURL(response.data)
      const a = document.createElement("a")
      const document = documents.find((doc) => doc.id === id)
      a.href = url
      a.download = document?.name || `document-${id}`
      if (document && document.body) {
        document.body.appendChild(a)
        a.click()
        window.URL.revokeObjectURL(url)
        document.body.removeChild(a)
      } else {
        a.click()
        window.URL.revokeObjectURL(url)
      }
    }
  }

const handleDeleteDocument = async (id: string) => {
    if (window.confirm("Are you sure you want to delete this document?")) {
      await deleteDocument(id)
    }
  }

const handleApproveDocument = async (id: string) => {
    await updateDocumentStatus(id, "approved")
  }

const handleRejectDocument = async (id: string) => {
    const reason = window.prompt("Please provide a reason for rejection:")
    if (reason) {
      await updateDocumentStatus(id, "rejected")
      // In a real app, you might want to store the rejection reason
    }
  }

const handleFilterChange = (filter: any) => {
    updateFilter({
      ...filter,
      projectId,
      search: searchTerm,
    })
  }

const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value)
    setCurrentPage(1)
  }

const handleAddDocument = () => {
    router.push("/installation/documents/upload" + (projectId ? `?projectId=${projectId}` : ""))
  }

return (
    <Card className="w-full">
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Documents</CardTitle>
            <CardDescription>Manage installation documents and files</CardDescription>
          </div>
          <div className="flex gap-2">
            <Button onClick={handleAddDocument} size="sm">
              <Plus className="h-4 w-4 mr-2" />
              Add Document
            </Button>
            {showFilters && (
              <Button variant="outline" size="sm" onClick={() => setShowFilterPanel(!showFilterPanel)}>
                <Filter className="h-4 w-4 mr-2" />
                Filters
              </Button>
            )}
          </div>
        </div>
      </CardHeader>

{showFilterPanel && (
        <CardContent>
          <DocumentFilter onChange={handleFilterChange} />
        </CardContent>
      )}

{showSearch && (
        <CardContent>
          <div className="relative">
            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Search documents..."
              value={searchTerm}
              onChange={handleSearchChange}
              className="pl-8"
            />
          </div>
        </CardContent>
      )}

<CardContent>
        {loading ? (
          <div className="flex justify-center items-center h-40">
            <p>Loading documents...</p>
          </div>
        ) : error ? (
          <div className="flex justify-center items-center h-40">
            <p className="text-red-500">{error}</p>
          </div>
        ) : paginatedDocuments.length === 0 ? (
          <div className="flex flex-col justify-center items-center h-40">
            <FileText className="h-12 w-12 text-muted-foreground mb-4" />
            <p className="text-muted-foreground">No documents found</p>
            <Button variant="outline" size="sm" className="mt-4" onClick={handleAddDocument}>
              Upload your first document
            </Button>
          </div>
        ) : (
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Size</TableHead>
                  <TableHead>Uploaded</TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {paginatedDocuments.map((document) => (
                  <TableRow key={document.id}>
                    <TableCell className="font-medium">
                      <div className="flex items-center">
                        <FileText className="h-4 w-4 mr-2 text-muted-foreground" />
                        <div>
                          <div>{document.name}</div>
                          {document.description && (
                            <div className="text-xs text-muted-foreground truncate max-w-xs">
                              {document.description}
                            </div>
                          )}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{document.type}</Badge>
                    </TableCell>
                    <TableCell>
                      <DocumentStatusBadge status={document.status} />
                    </TableCell>
                    <TableCell>{formatFileSize(document.fileSize)}</TableCell>
                    <TableCell>{formatDate(document.uploadDate)}</TableCell>
                    <TableCell className="text-right">
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="sm">
                            <MoreVertical className="h-4 w-4" />
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem onClick={() => handleViewDocument(document.id)}>
                            <Eye className="h-4 w-4 mr-2" />
                            View
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleEditDocument(document.id)}>
                            <Edit className="h-4 w-4 mr-2" />
                            Edit
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDownloadDocument(document.id)}>
                            <Download className="h-4 w-4 mr-2" />
                            Download
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleViewHistory(document.id)}>
                            <History className="h-4 w-4 mr-2" />
                            Version History
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          {document.status === "pending" && (
                            <>
                              <DropdownMenuItem onClick={() => handleApproveDocument(document.id)}>
                                <CheckCircle className="h-4 w-4 mr-2 text-green-500" />
                                Approve
                              </DropdownMenuItem>
                              <DropdownMenuItem onClick={() => handleRejectDocument(document.id)}>
                                <XCircle className="h-4 w-4 mr-2 text-red-500" />
                                Reject
                              </DropdownMenuItem>
                              <DropdownMenuSeparator />
                            </>
                          )}
                          <DropdownMenuItem onClick={() => handleDeleteDocument(document.id)} className="text-red-500">
                            <Trash2 className="h-4 w-4 mr-2" />
                            Delete
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>
        )}
      </CardContent>

{showPagination && totalPages > 1 && (
        <CardFooter>
          <Pagination className="w-full flex justify-center">
            <PaginationContent>
              <PaginationItem>
                <PaginationPrevious
                  onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
                  className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
                />
              </PaginationItem>

{Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
                <PaginationItem key={page}>
                  <PaginationLink isActive={page === currentPage} onClick={() => handlePageChange(page)}>
                    {page}
                  </PaginationLink>
                </PaginationItem>
              ))}

<PaginationItem>
                <PaginationNext
                  onClick={() => handlePageChange(Math.min(totalPages, currentPage + 1))}
                  className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
                />
              </PaginationItem>
            </PaginationContent>
          </Pagination>
        </CardFooter>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-card.tsx"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  FileText,
  Download,
  Trash2,
  MoreVertical,
  Eye,
  Edit,
  History,
  CheckCircle,
  XCircle,
  Calendar,
  User,
  Tag,
} from "lucide-react"
import type { Document } from "../../types/document"
import { DocumentStatusBadge } from "./document-status-badge"
import { useDocuments } from "../../hooks/use-documents"
import { formatDate } from "../../utils/date-utils"
import { formatFileSize } from "../../utils/format-utils"

interface DocumentCardProps {
  document: Document
  onStatusChange?: (id: string, status: string) => void
}

export function DocumentCard({ document, onStatusChange }: DocumentCardProps) {
  const router = useRouter()
  const [isExpanded, setIsExpanded] = useState(false)

const { deleteDocument, downloadDocument, updateDocumentStatus } = useDocuments()

const handleViewDocument = () => {
    router.push(`/installation/documents/${document.id}`)
  }

const handleEditDocument = () => {
    router.push(`/installation/documents/${document.id}?edit=true`)
  }

const handleViewHistory = () => {
    router.push(`/installation/documents/${document.id}/history`)
  }

const handleDownloadDocument = async () => {
    const response = await downloadDocument(document.id)
    if (response.success && response.data) {
      // Create a download link and trigger download
      const url = window.URL.createObjectURL(response.data)
      const a = document.createElement("a")
      a.href = url
      a.download = document.name || `document-${document.id}`
      document.body.appendChild(a)
      a.click()
      window.URL.revokeObjectURL(url)
      document.body.removeChild(a)
    }
  }

const handleDeleteDocument = async () => {
    if (window.confirm("Are you sure you want to delete this document?")) {
      await deleteDocument(document.id)
    }
  }

const handleApproveDocument = async () => {
    await updateDocumentStatus(document.id, "approved")
    if (onStatusChange) {
      onStatusChange(document.id, "approved")
    }
  }

const handleRejectDocument = async () => {
    const reason = window.prompt("Please provide a reason for rejection:")
    if (reason) {
      await updateDocumentStatus(document.id, "rejected")
      if (onStatusChange) {
        onStatusChange(document.id, "rejected")
      }
      // In a real app, you might want to store the rejection reason
    }
  }

const toggleExpand = () => {
    setIsExpanded(!isExpanded)
  }

return (
    <Card className="w-full">
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <div className="flex-1">
            <div className="flex items-center">
              <FileText className="h-5 w-5 mr-2 text-muted-foreground" />
              <CardTitle className="text-lg">{document.name}</CardTitle>
            </div>
            {document.description && (
              <CardDescription className="mt-1">
                {isExpanded
                  ? document.description
                  : document.description.length > 100
                    ? `${document.description.substring(0, 100)}...`
                    : document.description}
                {document.description.length > 100 && (
                  <Button variant="link" size="sm" className="p-0 h-auto text-xs" onClick={toggleExpand}>
                    {isExpanded ? "Show less" : "Show more"}
                  </Button>
                )}
              </CardDescription>
            )}
          </div>
          <DocumentStatusBadge status={document.status} />
        </div>
      </CardHeader>

<CardContent className="pb-2">
        <div className="grid grid-cols-2 gap-2 text-sm">
          <div className="flex items-center">
            <Badge variant="outline" className="mr-2">
              {document.type}
            </Badge>
            <Badge variant="outline">{document.category}</Badge>
          </div>
          <div className="flex items-center justify-end text-muted-foreground">{formatFileSize(document.fileSize)}</div>

<div className="flex items-center text-muted-foreground">
            <Calendar className="h-3.5 w-3.5 mr-1" />
            <span>Uploaded: {formatDate(document.uploadDate)}</span>
          </div>

{document.lastUpdated && (
            <div className="flex items-center justify-end text-muted-foreground">
              <Calendar className="h-3.5 w-3.5 mr-1" />
              <span>Updated: {formatDate(document.lastUpdated)}</span>
            </div>
          )}
        </div>

{document.tags && document.tags.length > 0 && (
          <div className="flex flex-wrap gap-1 mt-2">
            <Tag className="h-3.5 w-3.5 mr-1 text-muted-foreground" />
            {document.tags.map((tag, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        )}

{document.uploadedBy && (
          <div className="flex items-center mt-2 text-sm text-muted-foreground">
            <User className="h-3.5 w-3.5 mr-1" />
            <span>Uploaded by: {document.uploadedBy}</span>
          </div>
        )}
      </CardContent>

<div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={handleDownloadDocument}>
            <Download className="h-4 w-4 mr-2" />
            Download
          </Button>

<DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="sm">
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuLabel>Actions</DropdownMenuLabel>
              <DropdownMenuSeparator />
              <DropdownMenuItem onClick={handleEditDocument}>
                <Edit className="h-4 w-4 mr-2" />
                Edit
              </DropdownMenuItem>
              <DropdownMenuItem onClick={handleViewHistory}>
                <History className="h-4 w-4 mr-2" />
                Version History
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              {document.status === "pending" && (
                <>
                  <DropdownMenuItem onClick={handleApproveDocument}>
                    <CheckCircle className="h-4 w-4 mr-2 text-green-500" />
                    Approve
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={handleRejectDocument}>
                    <XCircle className="h-4 w-4 mr-2 text-red-500" />
                    Reject
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                </>
              )}
              <DropdownMenuItem onClick={handleDeleteDocument} className="text-red-500">
                <Trash2 className="h-4 w-4 mr-2" />
                Delete
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-status-badge.tsx"
import { Badge } from "@/components/ui/badge"
import type { DocumentStatus } from "../../types/document"
import { CheckCircle, XCircle, Clock, AlertCircle } from "lucide-react"

interface DocumentStatusBadgeProps {
  status: DocumentStatus
  showIcon?: boolean
  size?: "sm" | "md" | "lg"
}

export function DocumentStatusBadge({ status, showIcon = true, size = "md" }: DocumentStatusBadgeProps) {
  const getStatusConfig = () => {
    switch (status) {
      case "draft":
        return {
          label: "Draft",
          variant: "outline" as const,
          icon: <Clock className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      case "pending":
        return {
          label: "Pending Review",
          variant: "secondary" as const,
          icon: <Clock className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      case "approved":
        return {
          label: "Approved",
          variant: "default" as const,
          icon: <CheckCircle className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      case "rejected":
        return {
          label: "Rejected",
          variant: "destructive" as const,
          icon: <XCircle className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      case "expired":
        return {
          label: "Expired",
          variant: "outline" as const,
          icon: <AlertCircle className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      case "archived":
        return {
          label: "Archived",
          variant: "outline" as const,
          icon: <AlertCircle className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
      default:
        return {
          label: status,
          variant: "outline" as const,
          icon: <Clock className={`${size === "sm" ? "h-3 w-3" : "h-4 w-4"} mr-1`} />,
        }
    }
  }

const { label, variant, icon } = getStatusConfig()

return (
    <Badge variant={variant} className={size === "sm" ? "text-xs py-0 px-2" : ""}>
      {showIcon && icon}
      {label}
    </Badge>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/documents/document-upload.tsx"
"use client"

import type React from "react"

import { useState, useRef, type ChangeEvent } from "react"
import { useRouter } from "next/navigation"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Badge } from "@/components/ui/badge"
import { Upload, X, FileText, AlertCircle } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { useDocuments } from "../../hooks/use-documents"
import type { DocumentType, DocumentCategory } from "../../types/document"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { formatFileSize } from "../../utils/format-utils"

const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
const ACCEPTED_FILE_TYPES = [
  "application/pdf",
  "image/jpeg",
  "image/png",
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
  "application/vnd.openxmlformats-officedocument.presentationml.presentation",
  "text/plain",
  "application/zip",
]

const documentSchema = z.object({
  name: z.string().min(3, "Name must be at least 3 characters"),
  description: z.string().optional(),
  projectId: z.string().min(1, "Project is required"),
  type: z.string().min(1, "Document type is required"),
  category: z.string().min(1, "Document category is required"),
  tags: z.array(z.string()).optional(),
})

interface DocumentUploadProps {
  projectId?: string
  onSuccess?: (documentId: string) => void
  onCancel?: () => void
}

export function DocumentUpload({ projectId, onSuccess, onCancel }: DocumentUploadProps) {
  const router = useRouter()
  const { toast } = useToast()
  const [file, setFile] = useState<File | null>(null)
  const [fileError, setFileError] = useState<string | null>(null)
  const [isUploading, setIsUploading] = useState(false)
  const [tagInput, setTagInput] = useState("")
  const [tags, setTags] = useState<string[]>([])
  const fileInputRef = useRef<HTMLInputElement>(null)

const { uploadDocument } = useDocuments()

const form = useForm<z.infer<typeof documentSchema>>({
    resolver: zodResolver(documentSchema),
    defaultValues: {
      name: "",
      description: "",
      projectId: projectId || "",
      type: "",
      category: "",
      tags: [],
    },
  })

const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    const selectedFile = e.target.files?.[0]
    setFileError(null)

if (!selectedFile) {
      setFile(null)
      return
    }

// Validate file size
    if (selectedFile.size > MAX_FILE_SIZE) {
      setFileError(`File size exceeds the maximum limit of ${formatFileSize(MAX_FILE_SIZE)}`)
      setFile(null)
      return
    }

// Validate file type
    if (!ACCEPTED_FILE_TYPES.includes(selectedFile.type)) {
      setFileError("File type not supported")
      setFile(null)
      return
    }

setFile(selectedFile)

// Auto-fill name if empty
    if (!form.getValues("name")) {
      // Remove file extension from name
      const fileName = selectedFile.name.replace(/\.[^/.]+$/, "")
      form.setValue("name", fileName)
    }
  }

const handleAddTag = () => {
    if (tagInput.trim() && !tags.includes(tagInput.trim())) {
      const newTags = [...tags, tagInput.trim()]
      setTags(newTags)
      form.setValue("tags", newTags)
      setTagInput("")
    }
  }

const handleRemoveTag = (tagToRemove: string) => {
    const newTags = tags.filter((tag) => tag !== tagToRemove)
    setTags(newTags)
    form.setValue("tags", newTags)
  }

const handleTagInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter") {
      e.preventDefault()
      handleAddTag()
    }
  }

const onSubmit = async (values: z.infer<typeof documentSchema>) => {
    if (!file) {
      setFileError("Please select a file to upload")
      return
    }

setIsUploading(true)

try {
      const response = await uploadDocument({
        file,
        name: values.name,
        description: values.description,
        projectId: values.projectId,
        type: values.type as DocumentType,
        category: values.category as DocumentCategory,
        tags: values.tags,
      })

if (response.success) {
        toast({
          title: "Document uploaded successfully",
          description: `${values.name} has been uploaded.`,
        })

if (onSuccess) {
          onSuccess(response.data.id)
        } else {
          router.push(`/installation/documents/${response.data.id}`)
        }
      } else {
        toast({
          title: "Upload failed",
          description: response.error || "An error occurred while uploading the document.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Upload failed",
        description: "An unexpected error occurred.",
        variant: "destructive",
      })
    } finally {
      setIsUploading(false)
    }
  }

const handleCancel = () => {
    if (onCancel) {
      onCancel()
    } else {
      router.back()
    }
  }

return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle>Upload Document</CardTitle>
        <CardDescription>Upload and categorize installation documents</CardDescription>
      </CardHeader>

<Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <CardContent className="space-y-6">
            {/* File Upload Section */}
            <div className="space-y-2">
              <Label htmlFor="file">Document File</Label>
              <div
                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-muted/50 transition-colors ${
                  fileError ? "border-red-500" : file ? "border-green-500" : "border-muted"
                }`}
                onClick={() => fileInputRef.current?.click()}
              >
                <input
                  type="file"
                  id="file"
                  ref={fileInputRef}
                  className="hidden"
                  onChange={handleFileChange}
                  accept={ACCEPTED_FILE_TYPES.join(",")}
                />

{file ? (
                  <div className="flex flex-col items-center">
                    <FileText className="h-10 w-10 text-muted-foreground mb-2" />
                    <p className="font-medium">{file.name}</p>
                    <p className="text-sm text-muted-foreground">{formatFileSize(file.size)}</p>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      className="mt-2"
                      onClick={(e) => {
                        e.stopPropagation()
                        setFile(null)
                        if (fileInputRef.current) {
                          fileInputRef.current.value = ""
                        }
                      }}
                    >
                      <X className="h-4 w-4 mr-2" />
                      Remove
                    </Button>
                  </div>
                ) : (
                  <div className="flex flex-col items-center">
                    <Upload className="h-10 w-10 text-muted-foreground mb-2" />
                    <p className="font-medium">Click to upload or drag and drop</p>
                    <p className="text-sm text-muted-foreground">
                      PDF, Word, Excel, PowerPoint, Images, Text (max {formatFileSize(MAX_FILE_SIZE)})
                    </p>
                  </div>
                )}
              </div>

{fileError && (
                <div className="flex items-center text-red-500 text-sm mt-1">
                  <AlertCircle className="h-4 w-4 mr-1" />
                  {fileError}
                </div>
              )}
            </div>

{/* Document Details */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Document Name</FormLabel>
                    <FormControl>
                      <Input placeholder="Enter document name" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="projectId"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Project</FormLabel>
                    <FormControl>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select project" />
                        </SelectTrigger>
                        <SelectContent>
                          {/* In a real app, you would fetch projects from API */}
                          <SelectItem value="project-1">Solar Installation Project 1</SelectItem>
                          <SelectItem value="project-2">Residential Solar Project</SelectItem>
                          <SelectItem value="project-3">Commercial Solar Installation</SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

<FormField
              control={form.control}
              name="description"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Description</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Enter document description" className="resize-none" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <FormField
                control={form.control}
                name="type"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Document Type</FormLabel>
                    <FormControl>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select type" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="contract">Contract</SelectItem>
                          <SelectItem value="permit">Permit</SelectItem>
                          <SelectItem value="inspection">Inspection Report</SelectItem>
                          <SelectItem value="technical">Technical Specification</SelectItem>
                          <SelectItem value="manual">Manual</SelectItem>
                          <SelectItem value="invoice">Invoice</SelectItem>
                          <SelectItem value="warranty">Warranty</SelectItem>
                          <SelectItem value="photo">Photo</SelectItem>
                          <SelectItem value="other">Other</SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

<FormField
                control={form.control}
                name="category"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Category</FormLabel>
                    <FormControl>
                      <Select onValueChange={field.onChange} defaultValue={field.value}>
                        <SelectTrigger>
                          <SelectValue placeholder="Select category" />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="legal">Legal</SelectItem>
                          <SelectItem value="financial">Financial</SelectItem>
                          <SelectItem value="technical">Technical</SelectItem>
                          <SelectItem value="administrative">Administrative</SelectItem>
                          <SelectItem value="customer">Customer</SelectItem>
                          <SelectItem value="equipment">Equipment</SelectItem>
                          <SelectItem value="site">Site</SelectItem>
                          <SelectItem value="other">Other</SelectItem>
                        </SelectContent>
                      </Select>
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

{/* Tags */}
            <div className="space-y-2">
              <Label htmlFor="tags">Tags</Label>
              <div className="flex">
                <Input
                  id="tags"
                  value={tagInput}
                  onChange={(e) => setTagInput(e.target.value)}
                  onKeyDown={handleTagInputKeyDown}
                  placeholder="Add tags and press Enter"
                  className="flex-1"
                />
                <Button type="button" onClick={handleAddTag} className="ml-2">
                  Add
                </Button>
              </div>

{tags.length > 0 && (
                <div className="flex flex-wrap gap-2 mt-2">
                  {tags.map((tag, index) => (
                    <Badge key={index} variant="secondary" className="flex items-center">
                      {tag}
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        className="h-4 w-4 p-0 ml-1"
                        onClick={() => handleRemoveTag(tag)}
                      >
                        <X className="h-3 w-3" />
                      </Button>
                    </Badge>
                  ))}
                </div>
              )}
            </div>
          </CardContent>

<CardFooter className="flex justify-between">
            <Button type="button" variant="outline" onClick={handleCancel}>
              Cancel
            </Button>
            <Button type="submit" disabled={isUploading}>
              {isUploading ? "Uploading..." : "Upload Document"}
            </Button>
          </CardFooter>
        </form>
      </Form>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { DocumentStatus, DocumentType } from "@/modules/installation/types/document"

// Simulação de banco de dados para documentos
const documents = [
  {
    id: "1",
    name: "Manual de Instalação",
    description: "Manual técnico para instalação de painéis solares",
    projectId: "proj-001",
    type: DocumentType.MANUAL,
    category: "Técnico",
    url: "/documents/manual-instalacao.pdf",
    fileType: "application/pdf",
    fileSize: 2048,
    version: "1.0",
    status: DocumentStatus.ACTIVE,
    tags: ["manual", "técnico", "instalação"],
    metadata: {
      author: "Departamento Técnico",
      pages: 24,
    },
    uploadedAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    accessControl: {
      isPublic: false,
      roles: ["installer", "manager"],
    },
    signatures: [],
  },
  {
    id: "2",
    name: "Checklist de Segurança",
    description: "Checklist de segurança para instalação",
    projectId: "proj-001",
    type: DocumentType.CHECKLIST,
    category: "Segurança",
    url: "/documents/checklist-seguranca.pdf",
    fileType: "application/pdf",
    fileSize: 512,
    version: "1.0",
    status: DocumentStatus.ACTIVE,
    tags: ["checklist", "segurança"],
    metadata: {
      author: "Departamento de Segurança",
      pages: 5,
    },
    uploadedAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
    accessControl: {
      isPublic: false,
      roles: ["installer", "manager", "safety-officer"],
    },
    signatures: [],
  },
]

export async function GET(request: NextRequest) {
  try {
    // Obter parâmetros de consulta
    const { searchParams } = new URL(request.url)
    const projectId = searchParams.get("projectId")
    const type = searchParams.get("type")
    const category = searchParams.get("category")
    const status = searchParams.get("status")

// Filtrar documentos com base nos parâmetros
    let filteredDocuments = [...documents]

if (projectId) {
      filteredDocuments = filteredDocuments.filter((doc) => doc.projectId === projectId)
    }

if (type) {
      filteredDocuments = filteredDocuments.filter((doc) => doc.type === type)
    }

if (category) {
      filteredDocuments = filteredDocuments.filter((doc) => doc.category === category)
    }

if (status) {
      filteredDocuments = filteredDocuments.filter((doc) => doc.status === status)
    }

return NextResponse.json({ documents: filteredDocuments })
  } catch (error) {
    console.error("Erro ao buscar documentos:", error)
    return NextResponse.json({ error: "Erro ao buscar documentos" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const data = await request.json()

// Validar dados obrigatórios
    if (!data.name || !data.projectId || !data.type) {
      return NextResponse.json({ error: "Dados obrigatórios ausentes" }, { status: 400 })
    }

// Criar novo documento
    const newDocument = {
      id: `doc-${Date.now()}`,
      name: data.name,
      description: data.description || "",
      projectId: data.projectId,
      type: data.type,
      category: data.category || "Geral",
      url: data.url || "",
      fileType: data.fileType || "",
      fileSize: data.fileSize || 0,
      version: data.version || "1.0",
      status: data.status || DocumentStatus.DRAFT,
      tags: data.tags || [],
      metadata: data.metadata || {},
      uploadedAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      accessControl: data.accessControl || {
        isPublic: false,
        roles: ["installer", "manager"],
      },
      signatures: [],
    }

// Adicionar documento à lista
    documents.push(newDocument)

return NextResponse.json({ document: newDocument }, { status: 201 })
  } catch (error) {
    console.error("Erro ao criar documento:", error)
    return NextResponse.json({ error: "Erro ao criar documento" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/[id]/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { DocumentStatus } from "@/modules/installation/types/document"

// Simulação de banco de dados para documentos (referência à mesma variável do arquivo route.ts)
// Na implementação real, isso seria um banco de dados
const documents = [
  // Documentos definidos no arquivo route.ts
]

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

// Buscar documento pelo ID
    const document = documents.find((doc) => doc.id === id)

if (!document) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

return NextResponse.json({ document })
  } catch (error) {
    console.error("Erro ao buscar documento:", error)
    return NextResponse.json({ error: "Erro ao buscar documento" }, { status: 500 })
  }
}

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const data = await request.json()

// Buscar documento pelo ID
    const documentIndex = documents.findIndex((doc) => doc.id === id)

if (documentIndex === -1) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

// Atualizar documento
    const updatedDocument = {
      ...documents[documentIndex],
      ...data,
      updatedAt: new Date().toISOString(),
    }

documents[documentIndex] = updatedDocument

return NextResponse.json({ document: updatedDocument })
  } catch (error) {
    console.error("Erro ao atualizar documento:", error)
    return NextResponse.json({ error: "Erro ao atualizar documento" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

// Buscar documento pelo ID
    const documentIndex = documents.findIndex((doc) => doc.id === id)

if (documentIndex === -1) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

// Marcar documento como arquivado em vez de excluir
    documents[documentIndex] = {
      ...documents[documentIndex],
      status: DocumentStatus.ARCHIVED,
      updatedAt: new Date().toISOString(),
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Erro ao arquivar documento:", error)
    return NextResponse.json({ error: "Erro ao arquivar documento" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/upload/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { DocumentStatus, type DocumentType } from "@/modules/installation/types/document"

// Simulação de upload de arquivo
export async function POST(request: NextRequest) {
  try {
    // Em um ambiente real, aqui seria usado um serviço de armazenamento como AWS S3
    // Para esta simulação, vamos apenas processar os metadados do arquivo

const formData = await request.formData()
    const file = formData.get("file") as File
    const projectId = formData.get("projectId") as string
    const documentType = formData.get("type") as DocumentType
    const category = formData.get("category") as string
    const description = formData.get("description") as string

if (!file || !projectId || !documentType) {
      return NextResponse.json(
        { error: "Arquivo, ID do projeto e tipo de documento são obrigatórios" },
        { status: 400 },
      )
    }

// Simular URL de arquivo
    const fileName = file.name.replace(/\s+/g, "-").toLowerCase()
    const fileUrl = `/documents/${projectId}/${fileName}`

// Criar objeto de documento
    const newDocument = {
      id: `doc-${Date.now()}`,
      name: file.name,
      description: description || "",
      projectId,
      type: documentType,
      category: category || "Geral",
      url: fileUrl,
      fileType: file.type,
      fileSize: file.size,
      version: "1.0",
      status: DocumentStatus.ACTIVE,
      tags: [],
      metadata: {
        originalName: file.name,
        uploadedBy: "current-user-id", // Em um ambiente real, seria o ID do usuário autenticado
      },
      uploadedAt: new Date().toISOString(),
      updatedAt: new Date().toISOString(),
      accessControl: {
        isPublic: false,
        roles: ["installer", "manager"],
      },
      signatures: [],
    }

return NextResponse.json({ document: newDocument }, { status: 201 })
  } catch (error) {
    console.error("Erro ao fazer upload de documento:", error)
    return NextResponse.json({ error: "Erro ao fazer upload de documento" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/[id]/download/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// Simulação de banco de dados para documentos
const documents = [
  // Documentos definidos no arquivo route.ts
]

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

// Buscar documento pelo ID
    const document = documents.find((doc) => doc.id === id)

if (!document) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

// Em um ambiente real, aqui seria gerado um link de download temporário
    // ou o arquivo seria servido diretamente

// Para esta simulação, vamos apenas retornar a URL do documento
    return NextResponse.json({
      downloadUrl: document.url,
      fileName: document.name,
      fileType: document.fileType,
      fileSize: document.fileSize,
    })
  } catch (error) {
    console.error("Erro ao gerar link de download:", error)
    return NextResponse.json({ error: "Erro ao gerar link de download" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/[id]/signatures/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// Simulação de banco de dados para documentos
const documents = [
  // Documentos definidos no arquivo route.ts
]

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

// Buscar documento pelo ID
    const document = documents.find((doc) => doc.id === id)

if (!document) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

return NextResponse.json({ signatures: document.signatures })
  } catch (error) {
    console.error("Erro ao buscar assinaturas:", error)
    return NextResponse.json({ error: "Erro ao buscar assinaturas" }, { status: 500 })
  }
}

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const data = await request.json()

// Validar dados obrigatórios
    if (!data.signedBy || !data.signatureData) {
      return NextResponse.json({ error: "Dados de assinatura incompletos" }, { status: 400 })
    }

// Buscar documento pelo ID
    const documentIndex = documents.findIndex((doc) => doc.id === id)

if (documentIndex === -1) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

// Criar nova assinatura
    const newSignature = {
      id: `sig-${Date.now()}`,
      signedBy: data.signedBy,
      signedAt: new Date().toISOString(),
      signatureData: data.signatureData,
      role: data.role || "user",
      metadata: data.metadata || {},
    }

// Adicionar assinatura ao documento
    documents[documentIndex].signatures.push(newSignature)
    documents[documentIndex].updatedAt = new Date().toISOString()

return NextResponse.json({ signature: newSignature }, { status: 201 })
  } catch (error) {
    console.error("Erro ao adicionar assinatura:", error)
    return NextResponse.json({ error: "Erro ao adicionar assinatura" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/[id]/status/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import { DocumentStatus } from "@/modules/installation/types/document"

// Simulação de banco de dados para documentos
const documents = [
  // Documentos definidos no arquivo route.ts
]

export async function PUT(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const data = await request.json()

// Validar status
    if (!data.status || !Object.values(DocumentStatus).includes(data.status)) {
      return NextResponse.json({ error: "Status inválido" }, { status: 400 })
    }

// Buscar documento pelo ID
    const documentIndex = documents.findIndex((doc) => doc.id === id)

if (documentIndex === -1) {
      return NextResponse.json({ error: "Documento não encontrado" }, { status: 404 })
    }

// Atualizar status do documento
    documents[documentIndex] = {
      ...documents[documentIndex],
      status: data.status,
      updatedAt: new Date().toISOString(),
    }

return NextResponse.json({
      document: documents[documentIndex],
      message: `Status atualizado para ${data.status}`,
    })
  } catch (error) {
    console.error("Erro ao atualizar status do documento:", error)
    return NextResponse.json({ error: "Erro ao atualizar status do documento" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/installation/documents/[id]/versions/route.ts"
import { type NextRequest, NextResponse } from "next/server"

// Simulação de banco de dados para versões de documentos
const documentVersions = [
  {
    id: "v1",
    documentId: "1",
    version: "1.0",
    url: "/documents/manual-instalacao-v1.0.pdf",
    createdAt: "2023-01-15T10:00:00Z",
    createdBy: "user-123",
    changeLog: "Versão inicial",
  },
  {
    id: "v2",
    documentId: "1",
    version: "1.1",
    url: "/documents/manual-instalacao-v1.1.pdf",
    createdAt: "2023-02-20T14:30:00Z",
    createdBy: "user-123",
    changeLog: "Correções de erros tipográficos",
  },
]

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const documentId = params.id

// Buscar versões do documento
    const versions = documentVersions.filter((v) => v.documentId === documentId)

return NextResponse.json({ versions })
  } catch (error) {
    console.error("Erro ao buscar versões do documento:", error)
    return NextResponse.json({ error: "Erro ao buscar versões do documento" }, { status: 500 })
  }
}

export async function POST(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const documentId = params.id
    const data = await request.json()

// Validar dados obrigatórios
    if (!data.version || !data.url) {
      return NextResponse.json({ error: "Versão e URL são obrigatórios" }, { status: 400 })
    }

// Criar nova versão
    const newVersion = {
      id: `v${Date.now()}`,
      documentId,
      version: data.version,
      url: data.url,
      createdAt: new Date().toISOString(),
      createdBy: data.createdBy || "current-user-id",
      changeLog: data.changeLog || "",
    }

// Adicionar versão à lista
    documentVersions.push(newVersion)

return NextResponse.json({ version: newVersion }, { status: 201 })
  } catch (error) {
    console.error("Erro ao adicionar versão do documento:", error)
    return NextResponse.json({ error: "Erro ao adicionar versão do documento" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/installation/documents/page.tsx"
"use client"

import { useState } from "react"
import { useDocuments } from "@/modules/installation/hooks/use-documents"
import { DocumentList } from "@/modules/installation/components/documents/document-list"
import { DocumentFilter } from "@/modules/installation/components/documents/document-filter"
import { DocumentUpload } from "@/modules/installation/components/documents/document-upload"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { DocumentStatus } from "@/modules/installation/types/document"
import { Plus } from "lucide-react"

export default function DocumentsPage() {
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [activeTab, setActiveTab] = useState("all")
  const [filters, setFilters] = useState({
    type: "",
    category: "",
    status: "",
    projectId: "",
  })

const { documents, isLoading, error, refetch } = useDocuments(filters)

const handleFilterChange = (newFilters: any) => {
    setFilters({ ...filters, ...newFilters })
  }

const handleTabChange = (value: string) => {
    setActiveTab(value)

// Atualizar filtros com base na tab selecionada
    if (value === "all") {
      setFilters({ ...filters, status: "" })
    } else if (value === "active") {
      setFilters({ ...filters, status: DocumentStatus.ACTIVE })
    } else if (value === "pending") {
      setFilters({ ...filters, status: DocumentStatus.PENDING_APPROVAL })
    } else if (value === "archived") {
      setFilters({ ...filters, status: DocumentStatus.ARCHIVED })
    }
  }

const handleUploadSuccess = () => {
    setShowUploadModal(false)
    refetch()
  }

return (
    <div className="container mx-auto py-6">
      <div className="flex justify-between items-center mb-6">
        <div>
          <h1 className="text-3xl font-bold">Documentos de Instalação</h1>
          <p className="text-muted-foreground">Gerencie todos os documentos relacionados aos projetos de instalação</p>
        </div>
        <Button onClick={() => setShowUploadModal(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Novo Documento
        </Button>
      </div>

<Card className="mb-6">
        <CardHeader>
          <CardTitle>Filtros</CardTitle>
          <CardDescription>Filtre os documentos por tipo, categoria, status ou projeto</CardDescription>
        </CardHeader>
        <CardContent>
          <DocumentFilter onFilterChange={handleFilterChange} />
        </CardContent>
      </Card>

<Tabs value={activeTab} onValueChange={handleTabChange}>
        <TabsList className="mb-6">
          <TabsTrigger value="all">Todos</TabsTrigger>
          <TabsTrigger value="active">Ativos</TabsTrigger>
          <TabsTrigger value="pending">Pendentes</TabsTrigger>
          <TabsTrigger value="archived">Arquivados</TabsTrigger>
        </TabsList>

{showUploadModal && (
        <DocumentUpload
          isOpen={showUploadModal}
          onClose={() => setShowUploadModal(false)}
          onSuccess={handleUploadSuccess}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/installation/documents/[id]/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useDocuments } from "@/modules/installation/hooks/use-documents"
import { DocumentViewer } from "@/modules/installation/components/documents/document-viewer"
import { DocumentSignatureForm } from "@/modules/installation/components/documents/document-signature-form"
import { DocumentVersionHistory } from "@/modules/installation/components/documents/document-version-history"
import { DocumentStatusBadge } from "@/modules/installation/components/documents/document-status-badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Separator } from "@/components/ui/separator"
import { Badge } from "@/components/ui/badge"
import { AlertCircle, Download, FileText, History, PenTool, ArrowLeft, Edit, Archive } from "lucide-react"
import { type Document, DocumentStatus } from "@/modules/installation/types/document"
import { formatDate } from "@/modules/installation/utils/date-utils"
import { formatFileSize } from "@/modules/installation/utils/format-utils"

export default function DocumentDetailPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { getDocumentById, downloadDocument, updateDocumentStatus } = useDocuments()
  const [document, setDocument] = useState<Document | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchDocument = async () => {
      try {
        setIsLoading(true)
        const doc = await getDocumentById(params.id)
        setDocument(doc)
        setError(null)
      } catch (err) {
        setError("Erro ao carregar documento")
        console.error(err)
      } finally {
        setIsLoading(false)
      }
    }

fetchDocument()
  }, [params.id, getDocumentById])

const handleDownload = async () => {
    if (!document) return

try {
      await downloadDocument(document.id)
    } catch (err) {
      console.error("Erro ao baixar documento:", err)
    }
  }

const handleArchive = async () => {
    if (!document) return

try {
      await updateDocumentStatus(document.id, DocumentStatus.ARCHIVED)
      // Atualizar documento local
      setDocument({
        ...document,
        status: DocumentStatus.ARCHIVED,
      })
    } catch (err) {
      console.error("Erro ao arquivar documento:", err)
    }
  }

if (isLoading) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex justify-center items-center h-64">
          <p>Carregando documento...</p>
        </div>
      </div>
    )
  }

if (error || !document) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex flex-col items-center justify-center h-64">
          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
          <h2 className="text-xl font-semibold mb-2">Erro ao carregar documento</h2>
          <p className="text-muted-foreground mb-4">{error || "Documento não encontrado"}</p>
          <Button onClick={() => router.back()}>Voltar</Button>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto py-6">
      <div className="flex items-center mb-6">
        <Button variant="outline" size="icon" onClick={() => router.back()} className="mr-4">
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold">{document.name}</h1>
          <div className="flex items-center mt-1">
            <p className="text-muted-foreground mr-3">Atualizado em {formatDate(document.updatedAt)}</p>
            <DocumentStatusBadge status={document.status} />
          </div>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={handleDownload}>
            <Download className="mr-2 h-4 w-4" />
            Download
          </Button>
          <Button variant="outline" onClick={() => router.push(`/installation/documents/${document.id}/edit`)}>
            <Edit className="mr-2 h-4 w-4" />
            Editar
          </Button>
          {document.status !== DocumentStatus.ARCHIVED && (
            <Button variant="outline" onClick={handleArchive}>
              <Archive className="mr-2 h-4 w-4" />
              Arquivar
            </Button>
          )}
        </div>
      </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="md:col-span-2">
          <Tabs defaultValue="preview">
            <TabsList>
              <TabsTrigger value="preview">
                <FileText className="mr-2 h-4 w-4" />
                Visualização
              </TabsTrigger>
              <TabsTrigger value="signatures">
                <PenTool className="mr-2 h-4 w-4" />
                Assinaturas
              </TabsTrigger>
              <TabsTrigger value="versions">
                <History className="mr-2 h-4 w-4" />
                Histórico de Versões
              </TabsTrigger>
            </TabsList>

<TabsContent value="signatures" className="mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Assinaturas</CardTitle>
                  <CardDescription>Visualize e adicione assinaturas ao documento</CardDescription>
                </CardHeader>
                <CardContent>
                  {document.signatures && document.signatures.length > 0 ? (
                    <div className="space-y-4">
                      {document.signatures.map((signature) => (
                        <div key={signature.id} className="border rounded-lg p-4">
                          <div className="flex justify-between items-start">
                            <div>
                              <p className="font-medium">{signature.signedBy}</p>
                              <p className="text-sm text-muted-foreground">{formatDate(signature.signedAt)}</p>
                              <Badge className="mt-2">{signature.role}</Badge>
                            </div>
                            <div className="border p-2 rounded-md">
                              <img
                                src={signature.signatureData || "/placeholder.svg"}
                                alt="Assinatura"
                                className="h-16"
                              />
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  ) : (
                    <p className="text-muted-foreground">Este documento ainda não possui assinaturas.</p>
                  )}
                </CardContent>
                <CardFooter>
                  <DocumentSignatureForm documentId={document.id} />
                </CardFooter>
              </Card>
            </TabsContent>

<TabsContent value="versions" className="mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Histórico de Versões</CardTitle>
                  <CardDescription>Visualize e gerencie as versões anteriores deste documento</CardDescription>
                </CardHeader>
                <CardContent>
                  <DocumentVersionHistory documentId={document.id} />
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>

<div>
          <Card>
            <CardHeader>
              <CardTitle>Detalhes do Documento</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div>
                  <h3 className="text-sm font-medium text-muted-foreground">Descrição</h3>
                  <p>{document.description || "Sem descrição"}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Projeto</h3>
                  <p>{document.projectId}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Tipo</h3>
                  <p>{document.type}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Categoria</h3>
                  <p>{document.category}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Versão</h3>
                  <p>{document.version}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Tamanho</h3>
                  <p>{formatFileSize(document.fileSize)}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Tags</h3>
                  <div className="flex flex-wrap gap-2 mt-1">
                    {document.tags && document.tags.length > 0 ? (
                      document.tags.map((tag, index) => (
                        <Badge key={index} variant="secondary">
                          {tag}
                        </Badge>
                      ))
                    ) : (
                      <p className="text-sm text-muted-foreground">Sem tags</p>
                    )}
                  </div>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Data de Upload</h3>
                  <p>{formatDate(document.uploadedAt)}</p>
                </div>

<div>
                  <h3 className="text-sm font-medium text-muted-foreground">Última Atualização</h3>
                  <p>{formatDate(document.updatedAt)}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/installation/documents/[id]/history/page.tsx"
"use client"

import { useEffect, useState } from "react"
import { useRouter } from "next/navigation"
import { useDocuments } from "@/modules/installation/hooks/use-documents"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { ArrowLeft, Download, AlertCircle, Clock } from "lucide-react"
import { formatDate } from "@/modules/installation/utils/date-utils"

interface DocumentVersion {
  id: string
  documentId: string
  version: string
  url: string
  createdAt: string
  createdBy: string
  changeLog: string
}

export default function DocumentHistoryPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const { getDocumentById, getDocumentVersions } = useDocuments()
  const [document, setDocument] = useState<any | null>(null)
  const [versions, setVersions] = useState<DocumentVersion[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    const fetchData = async () => {
      try {
        setIsLoading(true)
        const doc = await getDocumentById(params.id)
        setDocument(doc)

const versionHistory = await getDocumentVersions(params.id)
        setVersions(versionHistory)

setError(null)
      } catch (err) {
        setError("Erro ao carregar histórico do documento")
        console.error(err)
      } finally {
        setIsLoading(false)
      }
    }

fetchData()
  }, [params.id, getDocumentById, getDocumentVersions])

if (isLoading) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex justify-center items-center h-64">
          <p>Carregando histórico do documento...</p>
        </div>
      </div>
    )
  }

if (error || !document) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex flex-col items-center justify-center h-64">
          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
          <h2 className="text-xl font-semibold mb-2">Erro ao carregar histórico</h2>
          <p className="text-muted-foreground mb-4">{error || "Documento não encontrado"}</p>
          <Button onClick={() => router.back()}>Voltar</Button>
        </div>
      </div>
    )
  }

<Card>
        <CardHeader>
          <CardTitle>Todas as Versões</CardTitle>
          <CardDescription>Histórico completo de versões deste documento</CardDescription>
        </CardHeader>
        <CardContent>
          {versions.length > 0 ? (
            <div className="space-y-6">
              {versions.map((version, index) => (
                <div key={version.id} className="relative pl-8 pb-6">
                  {index < versions.length - 1 && <div className="absolute left-3 top-0 bottom-0 w-px bg-border" />}
                  <div className="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                    <Clock className="h-3 w-3 text-primary-foreground" />
                  </div>

<div className="bg-card border rounded-lg p-4">
                    <div className="flex justify-between items-start mb-4">
                      <div>
                        <h3 className="font-semibold">Versão {version.version}</h3>
                        <p className="text-sm text-muted-foreground">{formatDate(version.createdAt)}</p>
                      </div>
                      <Button variant="outline" size="sm">
                        <Download className="mr-2 h-4 w-4" />
                        Download
                      </Button>
                    </div>

<div>
                      <h4 className="text-sm font-medium text-muted-foreground mb-1">Alterações</h4>
                      <p className="text-sm">{version.changeLog || "Sem descrição das alterações"}</p>
                    </div>

<div className="mt-3 text-sm">
                      <span className="text-muted-foreground">Criado por: </span>
                      <span>{version.createdBy}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8">
              <p className="text-muted-foreground">Este documento não possui histórico de versões.</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/installation/projects/[id]/documents/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useDocuments } from "@/modules/installation/hooks/use-documents"
import { DocumentList } from "@/modules/installation/components/documents/document-list"
import { DocumentUpload } from "@/modules/installation/components/documents/document-upload"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ArrowLeft, Plus, AlertCircle } from "lucide-react"
import { DocumentStatus } from "@/modules/installation/types/document"

export default function ProjectDocumentsPage({ params }: { params: { id: string } }) {
  const router = useRouter()
  const projectId = params.id
  const [showUploadModal, setShowUploadModal] = useState(false)
  const [activeTab, setActiveTab] = useState("all")
  const [projectName, setProjectName] = useState("")
  const [isLoadingProject, setIsLoadingProject] = useState(true)
  const [projectError, setProjectError] = useState<string | null>(null)

const { documents, isLoading, error, refetch } = useDocuments({
    projectId,
    status: activeTab === "all" ? "" : activeTab,
  })

useEffect(() => {
    // Aqui seria feita uma chamada para buscar os detalhes do projeto
    // Para simplificar, vamos apenas simular
    const fetchProject = async () => {
      try {
        setIsLoadingProject(true)
        // Simulação de chamada de API
        await new Promise((resolve) => setTimeout(resolve, 500))
        setProjectName(`Projeto #${projectId}`)
        setProjectError(null)
      } catch (err) {
        setProjectError("Erro ao carregar detalhes do projeto")
        console.error(err)
      } finally {
        setIsLoadingProject(false)
      }
    }

fetchProject()
  }, [projectId])

const handleTabChange = (value: string) => {
    setActiveTab(value)
  }

const handleUploadSuccess = () => {
    setShowUploadModal(false)
    refetch()
  }

if (isLoadingProject) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex justify-center items-center h-64">
          <p>Carregando detalhes do projeto...</p>
        </div>
      </div>
    )
  }

if (projectError) {
    return (
      <div className="container mx-auto py-6">
        <div className="flex flex-col items-center justify-center h-64">
          <AlertCircle className="h-12 w-12 text-red-500 mb-4" />
          <h2 className="text-xl font-semibold mb-2">Erro ao carregar projeto</h2>
          <p className="text-muted-foreground mb-4">{projectError}</p>
          <Button onClick={() => router.push("/installation/projects")}>Voltar para Projetos</Button>
        </div>
      </div>
    )
  }

return (
    <div className="container mx-auto py-6">
      <div className="flex items-center mb-6">
        <Button
          variant="outline"
          size="icon"
          onClick={() => router.push(`/installation/projects/${projectId}`)}
          className="mr-4"
        >
          <ArrowLeft className="h-4 w-4" />
        </Button>
        <div className="flex-1">
          <h1 className="text-3xl font-bold">Documentos do Projeto</h1>
          <p className="text-muted-foreground">{projectName}</p>
        </div>
        <Button onClick={() => setShowUploadModal(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Adicionar Documento
        </Button>
      </div>

<Card className="mb-6">
        <CardHeader>
          <CardTitle>Documentos do Projeto</CardTitle>
          <CardDescription>Gerencie todos os documentos relacionados a este projeto de instalação</CardDescription>
        </CardHeader>
        <CardContent className="p-0">
          <Tabs value={activeTab} onValueChange={handleTabChange}>
            <div className="px-6 pt-2">
              <TabsList className="mb-4">
                <TabsTrigger value="all">Todos</TabsTrigger>
                <TabsTrigger value={DocumentStatus.ACTIVE}>Ativos</TabsTrigger>
                <TabsTrigger value={DocumentStatus.PENDING_APPROVAL}>Pendentes</TabsTrigger>
                <TabsTrigger value={DocumentStatus.ARCHIVED}>Arquivados</TabsTrigger>
              </TabsList>
            </div>

{showUploadModal && (
        <DocumentUpload
          isOpen={showUploadModal}
          onClose={() => setShowUploadModal(false)}
          onSuccess={handleUploadSuccess}
          projectId={projectId}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/hooks/use-documents.ts"
"use client"

import { useState, useEffect, useCallback } from "react"
import type { Document, DocumentStatus } from "../types/document"
import {
  documentService,
  type DocumentFilter,
  type DocumentUploadParams,
  type DocumentUpdateParams,
  type DocumentSignatureParams,
} from "../services/document-service"

export function useDocuments(initialFilter?: DocumentFilter) {
  const [documents, setDocuments] = useState<Document[]>([])
  const [currentDocument, setCurrentDocument] = useState<Document | null>(null)
  const [documentVersions, setDocumentVersions] = useState<Document[]>([])
  const [loading, setLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)
  const [filter, setFilter] = useState<DocumentFilter | undefined>(initialFilter)

const fetchDocuments = useCallback(
    async (filterParams?: DocumentFilter) => {
      setLoading(true)
      setError(null)

const currentFilter = filterParams || filter
      const response = await documentService.getDocuments(currentFilter)

if (response.success) {
        setDocuments(response.data)
      } else {
        setError(response.error || "Failed to fetch documents")
      }

setLoading(false)
    },
    [filter],
  )

const fetchDocumentById = useCallback(async (id: string) => {
    setLoading(true)
    setError(null)

const response = await documentService.getDocumentById(id)

if (response.success) {
      setCurrentDocument(response.data)
    } else {
      setError(response.error || `Failed to fetch document with ID: ${id}`)
    }

setLoading(false)
    return response
  }, [])

const uploadDocument = useCallback(async (params: DocumentUploadParams) => {
    setLoading(true)
    setError(null)

const response = await documentService.uploadDocument(params)

if (response.success) {
      setDocuments((prev) => [...prev, response.data])
    } else {
      setError(response.error || "Failed to upload document")
    }

setLoading(false)
    return response
  }, [])

const updateDocument = useCallback(
    async (params: DocumentUpdateParams) => {
      setLoading(true)
      setError(null)

const response = await documentService.updateDocument(params)

if (response.success) {
        setDocuments((prev) => prev.map((doc) => (doc.id === params.id ? response.data : doc)))

if (currentDocument?.id === params.id) {
          setCurrentDocument(response.data)
        }
      } else {
        setError(response.error || `Failed to update document with ID: ${params.id}`)
      }

setLoading(false)
      return response
    },
    [currentDocument],
  )

const deleteDocument = useCallback(
    async (id: string) => {
      setLoading(true)
      setError(null)

const response = await documentService.deleteDocument(id)

if (response.success) {
        setDocuments((prev) => prev.filter((doc) => doc.id !== id))

if (currentDocument?.id === id) {
          setCurrentDocument(null)
        }
      } else {
        setError(response.error || `Failed to delete document with ID: ${id}`)
      }

setLoading(false)
      return response
    },
    [currentDocument],
  )

const downloadDocument = useCallback(async (id: string) => {
    setLoading(true)
    setError(null)

const response = await documentService.downloadDocument(id)

if (!response.success) {
      setError(response.error || `Failed to download document with ID: ${id}`)
    }

setLoading(false)
    return response
  }, [])

const signDocument = useCallback(
    async (params: DocumentSignatureParams) => {
      setLoading(true)
      setError(null)

const response = await documentService.signDocument(params)

if (response.success) {
        setDocuments((prev) => prev.map((doc) => (doc.id === params.documentId ? response.data : doc)))

if (currentDocument?.id === params.documentId) {
          setCurrentDocument(response.data)
        }
      } else {
        setError(response.error || `Failed to sign document with ID: ${params.documentId}`)
      }

setLoading(false)
      return response
    },
    [currentDocument],
  )

const updateDocumentStatus = useCallback(
    async (id: string, status: DocumentStatus) => {
      setLoading(true)
      setError(null)

const response = await documentService.updateDocumentStatus(id, status)

if (response.success) {
        setDocuments((prev) => prev.map((doc) => (doc.id === id ? response.data : doc)))

if (currentDocument?.id === id) {
          setCurrentDocument(response.data)
        }
      } else {
        setError(response.error || `Failed to update status for document with ID: ${id}`)
      }

setLoading(false)
      return response
    },
    [currentDocument],
  )

const fetchDocumentVersions = useCallback(async (id: string) => {
    setLoading(true)
    setError(null)

const response = await documentService.getDocumentVersions(id)

if (response.success) {
      setDocumentVersions(response.data)
    } else {
      setError(response.error || `Failed to fetch versions for document with ID: ${id}`)
    }

setLoading(false)
    return response
  }, [])

const updateFilter = useCallback((newFilter: DocumentFilter) => {
    setFilter(newFilter)
  }, [])

useEffect(() => {
    fetchDocuments()
  }, [fetchDocuments])

return {
    documents,
    currentDocument,
    documentVersions,
    loading,
    error,
    filter,
    fetchDocuments,
    fetchDocumentById,
    uploadDocument,
    updateDocument,
    deleteDocument,
    downloadDocument,
    signDocument,
    updateDocumentStatus,
    fetchDocumentVersions,
    updateFilter,
  }
}

// Exportar o hook para um único documento
export function useDocument(id: string) {
  const [document, setDocument] = useState<Document | null>(null)
  const [versions, setVersions] = useState<any[]>([])
  const [loading, setLoading] = useState<boolean>(true)
  const [error, setError] = useState<string | null>(null)

const fetchDocument = useCallback(async () => {
    setLoading(true)
    setError(null)

const response = await documentService.getDocumentById(id)

if (response.success) {
      setDocument(response.data)
    } else {
      setError(response.error || `Failed to fetch document with ID: ${id}`)
    }

setLoading(false)
  }, [id])

const fetchVersions = useCallback(async () => {
    if (!id) return

setLoading(true)
    const response = await documentService.getDocumentVersions(id)

if (response.success) {
      setVersions(response.data)
    } else {
      setError(response.error || `Failed to fetch versions for document with ID: ${id}`)
    }

setLoading(false)
  }, [id])

const updateDocument = useCallback(
    async (params: Partial<Document>) => {
      if (!id) return { success: false, data: null, error: "No document ID provided" }

setLoading(true)
      const response = await documentService.updateDocument({
        id,
        ...params,
      })

if (response.success) {
        setDocument(response.data)
      } else {
        setError(response.error || `Failed to update document with ID: ${id}`)
      }

setLoading(false)
      return response
    },
    [id],
  )

const signDocument = useCallback(
    async (signatureData: string, signedBy: string, role?: string, metadata?: Record<string, any>) => {
      if (!id) return { success: false, data: null, error: "No document ID provided" }

setLoading(true)
      const response = await documentService.signDocument({
        documentId: id,
        signatureData,
        signedBy,
        role,
        metadata,
      })

if (response.success) {
        setDocument(response.data)
      } else {
        setError(response.error || `Failed to sign document with ID: ${id}`)
      }

setLoading(false)
      return response
    },
    [id],
  )

const updateStatus = useCallback(
    async (status: DocumentStatus) => {
      if (!id) return { success: false, data: null, error: "No document ID provided" }

setLoading(true)
      const response = await documentService.updateDocumentStatus(id, status)

if (response.success) {
        setDocument(response.data)
      } else {
        setError(response.error || `Failed to update status for document with ID: ${id}`)
      }

setLoading(false)
      return response
    },
    [id],
  )

const downloadDocument = useCallback(async () => {
    if (!id) return { success: false, data: null, error: "No document ID provided" }

setLoading(true)
    const response = await documentService.downloadDocument(id)
    setLoading(false)
    return response
  }, [id])

useEffect(() => {
    if (id) {
      fetchDocument()
      fetchVersions()
    }
  }, [fetchDocument, fetchVersions, id])

return {
    document,
    versions,
    loading,
    error,
    updateDocument,
    signDocument,
    updateStatus,
    downloadDocument,
    refresh: fetchDocument,
    refreshVersions: fetchVersions,
  }
}
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/sales-overview.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Bar, BarChart, ResponsiveContainer, XAxis, YAxis, Tooltip } from "recharts"

interface SalesOverviewProps {
  data?: any[]
  title?: string
  description?: string
}

export function SalesOverview({
  data = [
    { month: "Jan", value: 12400 },
    { month: "Fev", value: 15600 },
    { month: "Mar", value: 18200 },
    { month: "Abr", value: 16800 },
    { month: "Mai", value: 19500 },
    { month: "Jun", value: 22100 },
  ],
  title = "Visão Geral de Vendas",
  description = "Visão geral das vendas nos últimos 6 meses",
}: SalesOverviewProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="h-[300px]">
          <ResponsiveContainer width="100%" height="100%">
            <BarChart data={data}>
              <XAxis dataKey="month" />
              <YAxis />
              <Tooltip
                formatter={(value) => [`R$ ${value.toLocaleString("pt-BR")}`, "Valor"]}
                labelFormatter={(label) => `Mês: ${label}`}
              />
              <Bar dataKey="value" fill="#3b82f6" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/contracts/contract-list.tsx"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Eye, FileText, MoreHorizontal } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

interface Contract {
  id: string
  number: string
  customerName: string
  value: number
  status: "draft" | "signed" | "active" | "completed" | "cancelled"
  createdAt: string
}

interface ContractListProps {
  contracts?: Contract[]
  title?: string
  onViewContract?: (id: string) => void
  onDownloadContract?: (id: string) => void
}

export function ContractList({
  contracts = [
    {
      id: "1",
      number: "CONT-2023-001",
      customerName: "João Silva",
      value: 15000,
      status: "active",
      createdAt: "2023-05-15T10:30:00Z",
    },
    {
      id: "2",
      number: "CONT-2023-002",
      customerName: "Maria Oliveira",
      value: 22500,
      status: "signed",
      createdAt: "2023-05-20T14:45:00Z",
    },
    {
      id: "3",
      number: "CONT-2023-003",
      customerName: "Carlos Santos",
      value: 18750,
      status: "draft",
      createdAt: "2023-05-25T09:15:00Z",
    },
    {
      id: "4",
      number: "CONT-2023-004",
      customerName: "Ana Pereira",
      value: 31200,
      status: "completed",
      createdAt: "2023-04-10T11:20:00Z",
    },
    {
      id: "5",
      number: "CONT-2023-005",
      customerName: "Roberto Almeida",
      value: 27800,
      status: "cancelled",
      createdAt: "2023-04-05T16:30:00Z",
    },
  ],
  title = "Contratos",
  onViewContract = () => {},
  onDownloadContract = () => {},
}: ContractListProps) {
  const getStatusBadge = (status: string) => {
    const statusMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      draft: { label: "Rascunho", variant: "outline" },
      signed: { label: "Assinado", variant: "secondary" },
      active: { label: "Ativo", variant: "success" },
      completed: { label: "Concluído", variant: "default" },
      cancelled: { label: "Cancelado", variant: "destructive" },
    }

const statusInfo = statusMap[status] || { label: status, variant: "default" }

return <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR").format(date)
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Número</TableHead>
              <TableHead>Cliente</TableHead>
              <TableHead>Valor</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Data</TableHead>
              <TableHead className="text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {contracts.map((contract) => (
              <TableRow key={contract.id}>
                <TableCell>{contract.number}</TableCell>
                <TableCell>{contract.customerName}</TableCell>
                <TableCell>{formatCurrency(contract.value)}</TableCell>
                <TableCell>{getStatusBadge(contract.status)}</TableCell>
                <TableCell>{formatDate(contract.createdAt)}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Abrir menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => onViewContract(contract.id)}>
                        <Eye className="mr-2 h-4 w-4" />
                        <span>Visualizar</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onDownloadContract(contract.id)}>
                        <FileText className="mr-2 h-4 w-4" />
                        <span>Download</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/customers/customer-list.tsx"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Eye, Edit, MoreHorizontal, Phone, Mail } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

interface Customer {
  id: string
  name: string
  email: string
  phone: string
  type: "residential" | "commercial" | "industrial"
  status: "active" | "inactive" | "lead"
  createdAt: string
}

interface CustomerListProps {
  customers?: Customer[]
  title?: string
  onViewCustomer?: (id: string) => void
  onEditCustomer?: (id: string) => void
  onCallCustomer?: (phone: string) => void
  onEmailCustomer?: (email: string) => void
}

export function CustomerList({
  customers = [
    {
      id: "1",
      name: "João Silva",
      email: "joao.silva@email.com",
      phone: "(11) 98765-4321",
      type: "residential",
      status: "active",
      createdAt: "2023-05-15T10:30:00Z",
    },
    {
      id: "2",
      name: "Supermercados Oliveira",
      email: "contato@oliveira.com",
      phone: "(11) 3456-7890",
      type: "commercial",
      status: "active",
      createdAt: "2023-05-20T14:45:00Z",
    },
    {
      id: "3",
      name: "Indústrias Santos",
      email: "comercial@santos.ind.br",
      phone: "(11) 2345-6789",
      type: "industrial",
      status: "inactive",
      createdAt: "2023-05-25T09:15:00Z",
    },
    {
      id: "4",
      name: "Ana Pereira",
      email: "ana.pereira@email.com",
      phone: "(11) 91234-5678",
      type: "residential",
      status: "lead",
      createdAt: "2023-04-10T11:20:00Z",
    },
    {
      id: "5",
      name: "Farmácia Almeida",
      email: "contato@farmaciaalmeida.com.br",
      phone: "(11) 3987-6543",
      type: "commercial",
      status: "active",
      createdAt: "2023-04-05T16:30:00Z",
    },
  ],
  title = "Clientes",
  onViewCustomer = () => {},
  onEditCustomer = () => {},
  onCallCustomer = () => {},
  onEmailCustomer = () => {},
}: CustomerListProps) {
  const getTypeLabel = (type: string) => {
    const typeMap: Record<string, { label: string; variant: "default" | "outline" | "secondary" }> = {
      residential: { label: "Residencial", variant: "outline" },
      commercial: { label: "Comercial", variant: "secondary" },
      industrial: { label: "Industrial", variant: "default" },
    }

const typeInfo = typeMap[type] || { label: type, variant: "default" }

return <Badge variant={typeInfo.variant}>{typeInfo.label}</Badge>
  }

const getStatusBadge = (status: string) => {
    const statusMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      active: { label: "Ativo", variant: "success" },
      inactive: { label: "Inativo", variant: "destructive" },
      lead: { label: "Lead", variant: "secondary" },
    }

const statusInfo = statusMap[status] || { label: status, variant: "default" }

return <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR").format(date)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Nome</TableHead>
              <TableHead>Tipo</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Cadastro</TableHead>
              <TableHead className="text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {customers.map((customer) => (
              <TableRow key={customer.id}>
                <TableCell>
                  <div>
                    <div className="font-medium">{customer.name}</div>
                    <div className="text-sm text-muted-foreground">{customer.email}</div>
                  </div>
                </TableCell>
                <TableCell>{getTypeLabel(customer.type)}</TableCell>
                <TableCell>{getStatusBadge(customer.status)}</TableCell>
                <TableCell>{formatDate(customer.createdAt)}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Abrir menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => onViewCustomer(customer.id)}>
                        <Eye className="mr-2 h-4 w-4" />
                        <span>Visualizar</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onEditCustomer(customer.id)}>
                        <Edit className="mr-2 h-4 w-4" />
                        <span>Editar</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onCallCustomer(customer.phone)}>
                        <Phone className="mr-2 h-4 w-4" />
                        <span>Ligar</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onEmailCustomer(customer.email)}>
                        <Mail className="mr-2 h-4 w-4" />
                        <span>Email</span>
                      </DropdownMenuItem>
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/proposals/proposal-list.tsx"
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Eye, FileText, MoreHorizontal, Check, X } from "lucide-react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

interface Proposal {
  id: string
  number: string
  customerName: string
  value: number
  status: "draft" | "sent" | "accepted" | "rejected" | "expired"
  createdAt: string
  expiresAt: string
}

interface ProposalListProps {
  proposals?: Proposal[]
  title?: string
  onViewProposal?: (id: string) => void
  onDownloadProposal?: (id: string) => void
  onAcceptProposal?: (id: string) => void
  onRejectProposal?: (id: string) => void
}

export function ProposalList({
  proposals = [
    {
      id: "1",
      number: "PROP-2023-001",
      customerName: "João Silva",
      value: 15000,
      status: "sent",
      createdAt: "2023-05-15T10:30:00Z",
      expiresAt: "2023-06-15T10:30:00Z",
    },
    {
      id: "2",
      number: "PROP-2023-002",
      customerName: "Maria Oliveira",
      value: 22500,
      status: "accepted",
      createdAt: "2023-05-20T14:45:00Z",
      expiresAt: "2023-06-20T14:45:00Z",
    },
    {
      id: "3",
      number: "PROP-2023-003",
      customerName: "Carlos Santos",
      value: 18750,
      status: "draft",
      createdAt: "2023-05-25T09:15:00Z",
      expiresAt: "2023-06-25T09:15:00Z",
    },
    {
      id: "4",
      number: "PROP-2023-004",
      customerName: "Ana Pereira",
      value: 31200,
      status: "rejected",
      createdAt: "2023-04-10T11:20:00Z",
      expiresAt: "2023-05-10T11:20:00Z",
    },
    {
      id: "5",
      number: "PROP-2023-005",
      customerName: "Roberto Almeida",
      value: 27800,
      status: "expired",
      createdAt: "2023-04-05T16:30:00Z",
      expiresAt: "2023-05-05T16:30:00Z",
    },
  ],
  title = "Propostas",
  onViewProposal = () => {},
  onDownloadProposal = () => {},
  onAcceptProposal = () => {},
  onRejectProposal = () => {},
}: ProposalListProps) {
  const getStatusBadge = (status: string) => {
    const statusMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      draft: { label: "Rascunho", variant: "outline" },
      sent: { label: "Enviada", variant: "secondary" },
      accepted: { label: "Aceita", variant: "success" },
      rejected: { label: "Rejeitada", variant: "destructive" },
      expired: { label: "Expirada", variant: "default" },
    }

const statusInfo = statusMap[status] || { label: status, variant: "default" }

return <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR").format(date)
  }

const formatCurrency = (value: number) => {
    return new Intl.NumberFormat("pt-BR", {
      style: "currency",
      currency: "BRL",
    }).format(value)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Número</TableHead>
              <TableHead>Cliente</TableHead>
              <TableHead>Valor</TableHead>
              <TableHead>Status</TableHead>
              <TableHead>Validade</TableHead>
              <TableHead className="text-right">Ações</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {proposals.map((proposal) => (
              <TableRow key={proposal.id}>
                <TableCell>{proposal.number}</TableCell>
                <TableCell>{proposal.customerName}</TableCell>
                <TableCell>{formatCurrency(proposal.value)}</TableCell>
                <TableCell>{getStatusBadge(proposal.status)}</TableCell>
                <TableCell>{formatDate(proposal.expiresAt)}</TableCell>
                <TableCell className="text-right">
                  <DropdownMenu>
                    <DropdownMenuTrigger asChild>
                      <Button variant="ghost" size="icon">
                        <MoreHorizontal className="h-4 w-4" />
                        <span className="sr-only">Abrir menu</span>
                      </Button>
                    </DropdownMenuTrigger>
                    <DropdownMenuContent align="end">
                      <DropdownMenuItem onClick={() => onViewProposal(proposal.id)}>
                        <Eye className="mr-2 h-4 w-4" />
                        <span>Visualizar</span>
                      </DropdownMenuItem>
                      <DropdownMenuItem onClick={() => onDownloadProposal(proposal.id)}>
                        <FileText className="mr-2 h-4 w-4" />
                        <span>Download</span>
                      </DropdownMenuItem>
                      {proposal.status === "sent" && (
                        <>
                          <DropdownMenuItem onClick={() => onAcceptProposal(proposal.id)}>
                            <Check className="mr-2 h-4 w-4" />
                            <span>Aceitar</span>
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => onRejectProposal(proposal.id)}>
                            <X className="mr-2 h-4 w-4" />
                            <span>Rejeitar</span>
                          </DropdownMenuItem>
                        </>
                      )}
                    </DropdownMenuContent>
                  </DropdownMenu>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/dashboard/equipment-inventory.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

interface EquipmentItem {
  id: string
  name: string
  type: string
  quantity: number
  allocated: number
  status: "in-stock" | "low-stock" | "out-of-stock"
}

interface EquipmentInventoryProps {
  items?: EquipmentItem[]
  title?: string
  description?: string
}

export function EquipmentInventory({
  items = [
    {
      id: "1",
      name: "Painel Solar 450W",
      type: "Painel",
      quantity: 120,
      allocated: 85,
      status: "in-stock",
    },
    {
      id: "2",
      name: "Inversor 5kW",
      type: "Inversor",
      quantity: 45,
      allocated: 38,
      status: "low-stock",
    },
    {
      id: "3",
      name: "Estrutura de Fixação Residencial",
      type: "Estrutura",
      quantity: 60,
      allocated: 42,
      status: "in-stock",
    },
    {
      id: "4",
      name: "Cabo Solar 6mm²",
      type: "Cabo",
      quantity: 2500,
      allocated: 1800,
      status: "in-stock",
    },
    {
      id: "5",
      name: "Conectores MC4",
      type: "Conector",
      quantity: 0,
      allocated: 0,
      status: "out-of-stock",
    },
  ],
  title = "Inventário de Equipamentos",
  description = "Status atual do estoque de equipamentos para instalação",
}: EquipmentInventoryProps) {
  const getStatusBadge = (status: string) => {
    const statusMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      "in-stock": { label: "Em Estoque", variant: "success" },
      "low-stock": { label: "Estoque Baixo", variant: "secondary" },
      "out-of-stock": { label: "Sem Estoque", variant: "destructive" },
    }

const statusInfo = statusMap[status] || { label: status, variant: "default" }

return <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
  }

const calculatePercentage = (allocated: number, total: number) => {
    if (total === 0) return 0
    return Math.round((allocated / total) * 100)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Equipamento</TableHead>
              <TableHead>Tipo</TableHead>
              <TableHead>Quantidade</TableHead>
              <TableHead>Alocação</TableHead>
              <TableHead>Status</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.map((item) => {
              const percentage = calculatePercentage(item.allocated, item.quantity)

return (
                <TableRow key={item.id}>
                  <TableCell className="font-medium">{item.name}</TableCell>
                  <TableCell>{item.type}</TableCell>
                  <TableCell>{item.quantity}</TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-2">
                      <div className="flex justify-between text-xs">
                        <span>{item.allocated} alocados</span>
                        <span>{percentage}%</span>
                      </div>
                      <Progress value={percentage} className="h-2" />
                    </div>
                  </TableCell>
                  <TableCell>{getStatusBadge(item.status)}</TableCell>
                </TableRow>
              )
            })}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/dashboard/upcoming-inspections.tsx"
"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { CalendarIcon, MapPinIcon, UserIcon } from "lucide-react"

interface Inspection {
  id: string
  projectName: string
  address: string
  inspector: string
  date: string
  type: "initial" | "progress" | "final" | "warranty"
  status: "scheduled" | "completed" | "cancelled" | "rescheduled"
}

interface UpcomingInspectionsProps {
  inspections?: Inspection[]
  title?: string
  description?: string
}

export function UpcomingInspections({
  inspections = [
    {
      id: "1",
      projectName: "Residencial Silva",
      address: "Rua das Flores, 123 - São Paulo, SP",
      inspector: "Carlos Mendes",
      date: "2023-06-15T14:00:00Z",
      type: "final",
      status: "scheduled",
    },
    {
      id: "2",
      projectName: "Comercial Oliveira",
      address: "Av. Paulista, 1000 - São Paulo, SP",
      inspector: "Ana Costa",
      date: "2023-06-16T10:30:00Z",
      type: "progress",
      status: "scheduled",
    },
    {
      id: "3",
      projectName: "Residencial Pereira",
      address: "Rua dos Pinheiros, 45 - São Paulo, SP",
      inspector: "Roberto Alves",
      date: "2023-06-14T09:00:00Z",
      type: "initial",
      status: "rescheduled",
    },
  ],
  title = "Próximas Inspeções",
  description = "Inspeções agendadas para os próximos dias",
}: UpcomingInspectionsProps) {
  const getTypeBadge = (type: string) => {
    const typeMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      initial: { label: "Inicial", variant: "outline" },
      progress: { label: "Andamento", variant: "secondary" },
      final: { label: "Final", variant: "success" },
      warranty: { label: "Garantia", variant: "default" },
    }

const typeInfo = typeMap[type] || { label: type, variant: "default" }

return <Badge variant={typeInfo.variant}>{typeInfo.label}</Badge>
  }

const getStatusBadge = (status: string) => {
    const statusMap: Record<
      string,
      { label: string; variant: "default" | "outline" | "secondary" | "destructive" | "success" }
    > = {
      scheduled: { label: "Agendada", variant: "success" },
      completed: { label: "Concluída", variant: "default" },
      cancelled: { label: "Cancelada", variant: "destructive" },
      rescheduled: { label: "Reagendada", variant: "secondary" },
    }

const statusInfo = statusMap[status] || { label: status, variant: "default" }

return <Badge variant={statusInfo.variant}>{statusInfo.label}</Badge>
  }

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    }).format(date)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {inspections.map((inspection) => (
            <div key={inspection.id} className="border rounded-lg p-4">
              <div className="flex justify-between items-start mb-2">
                <h3 className="font-medium text-lg">{inspection.projectName}</h3>
                <div className="flex gap-2">
                  {getTypeBadge(inspection.type)}
                  {getStatusBadge(inspection.status)}
                </div>
              </div>
              <div className="space-y-2 text-sm">
                <div className="flex items-center gap-2">
                  <CalendarIcon className="h-4 w-4 text-muted-foreground" />
                  <span>{formatDate(inspection.date)}</span>
                </div>
                <div className="flex items-center gap-2">
                  <MapPinIcon className="h-4 w-4 text-muted-foreground" />
                  <span>{inspection.address}</span>
                </div>
                <div className="flex items-center gap-2">
                  <UserIcon className="h-4 w-4 text-muted-foreground" />
                  <span>Inspetor: {inspection.inspector}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/dashboard/schedule-calendar.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Calendar } from "@/components/ui/calendar"
import { Badge } from "@/components/ui/badge"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"

interface ScheduleEvent {
  id: string
  title: string
  date: Date
  type: "installation" | "inspection" | "maintenance" | "delivery"
  projectId: string
  projectName: string
  teamId?: string
  teamName?: string
  location?: string
}

interface ScheduleCalendarProps {
  events?: ScheduleEvent[]
  title?: string
  description?: string
}

export function ScheduleCalendar({
  events = [
    {
      id: "1",
      title: "Instalação Residencial Silva",
      date: new Date(2023, 5, 15), // 15/06/2023
      type: "installation",
      projectId: "proj-001",
      projectName: "Residencial Silva",
      teamId: "team-001",
      teamName: "Equipe Alpha",
      location: "Rua das Flores, 123 - São Paulo, SP",
    },
    {
      id: "2",
      title: "Inspeção Final Comercial Oliveira",
      date: new Date(2023, 5, 16), // 16/06/2023
      type: "inspection",
      projectId: "proj-002",
      projectName: "Comercial Oliveira",
      location: "Av. Paulista, 1000 - São Paulo, SP",
    },
    {
      id: "3",
      title: "Entrega de Equipamentos",
      date: new Date(2023, 5, 14), // 14/06/2023
      type: "delivery",
      projectId: "proj-003",
      projectName: "Residencial Pereira",
      location: "Rua dos Pinheiros, 45 - São Paulo, SP",
    },
    {
      id: "4",
      title: "Manutenção Preventiva",
      date: new Date(2023, 5, 20), // 20/06/2023
      type: "maintenance",
      projectId: "proj-004",
      projectName: "Industrial Santos",
      teamId: "team-002",
      teamName: "Equipe Beta",
      location: "Rodovia Anchieta, Km 10 - São Bernardo do Campo, SP",
    },
  ],
  title = "Calendário de Instalações",
  description = "Agenda de instalações, inspeções e manutenções",
}: ScheduleCalendarProps) {
  const [selectedDate, setSelectedDate] = useState<Date | undefined>(new Date())
  const [selectedEvent, setSelectedEvent] = useState<ScheduleEvent | null>(null)
  const [isDialogOpen, setIsDialogOpen] = useState(false)

const getEventsByDate = (date: Date) => {
    return events.filter(
      (event) =>
        event.date.getDate() === date.getDate() &&
        event.date.getMonth() === date.getMonth() &&
        event.date.getFullYear() === date.getFullYear(),
    )
  }

const handleDateSelect = (date: Date | undefined) => {
    setSelectedDate(date)
  }

const handleEventClick = (event: ScheduleEvent) => {
    setSelectedEvent(event)
    setIsDialogOpen(true)
  }

const getEventBadgeColor = (type: string) => {
    const typeMap: Record<string, string> = {
      installation: "bg-blue-500",
      inspection: "bg-amber-500",
      maintenance: "bg-emerald-500",
      delivery: "bg-purple-500",
    }

return typeMap[type] || "bg-gray-500"
  }

const getEventTypeName = (type: string) => {
    const typeMap: Record<string, string> = {
      installation: "Instalação",
      inspection: "Inspeção",
      maintenance: "Manutenção",
      delivery: "Entrega",
    }

return typeMap[type] || type
  }

const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat("pt-BR", {
      day: "2-digit",
      month: "2-digit",
      year: "numeric",
    }).format(date)
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="grid grid-cols-1 md:grid-cols-7 gap-6">
          <div className="md:col-span-5">
            <Calendar
              mode="single"
              selected={selectedDate}
              onSelect={handleDateSelect}
              className="rounded-md border"
              components={{
                DayContent: ({ day }) => {
                  const dayEvents = getEventsByDate(day.date)
                  return (
                    <div className="w-full h-full">
                      <div>{day.date.getDate()}</div>
                      {dayEvents.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {dayEvents.map((event) => (
                            <div key={event.id} className={`w-2 h-2 rounded-full ${getEventBadgeColor(event.type)}`} />
                          ))}
                        </div>
                      )}
                    </div>
                  )
                },
              }}
            />
          </div>
          <div className="md:col-span-2">
            <div className="space-y-4">
              <h3 className="font-medium">Eventos em {selectedDate ? formatDate(selectedDate) : ""}</h3>
              {selectedDate && getEventsByDate(selectedDate).length > 0 ? (
                <div className="space-y-3">
                  {getEventsByDate(selectedDate).map((event) => (
                    <div
                      key={event.id}
                      className="border rounded-md p-3 cursor-pointer hover:bg-muted transition-colors"
                      onClick={() => handleEventClick(event)}
                    >
                      <div className="flex items-center gap-2 mb-1">
                        <div className={`w-3 h-3 rounded-full ${getEventBadgeColor(event.type)}`} />
                        <span className="text-sm font-medium">{getEventTypeName(event.type)}</span>
                      </div>
                      <h4 className="font-medium">{event.title}</h4>
                      <p className="text-sm text-muted-foreground truncate">{event.location}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <p className="text-sm text-muted-foreground">Nenhum evento agendado para esta data.</p>
              )}
            </div>
          </div>
        </div>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
          {selectedEvent && (
            <DialogContent>
              <DialogHeader>
                <DialogTitle>{selectedEvent.title}</DialogTitle>
                <DialogDescription>Detalhes do evento agendado para {formatDate(selectedEvent.date)}</DialogDescription>
              </DialogHeader>
              <div className="space-y-4 py-4">
                <div className="flex items-center gap-2">
                  <Badge className={getEventBadgeColor(selectedEvent.type)}>
                    {getEventTypeName(selectedEvent.type)}
                  </Badge>
                </div>
                <div className="space-y-2">
                  <div>
                    <span className="font-medium">Projeto: </span>
                    <span>{selectedEvent.projectName}</span>
                  </div>
                  {selectedEvent.teamName && (
                    <div>
                      <span className="font-medium">Equipe: </span>
                      <span>{selectedEvent.teamName}</span>
                    </div>
                  )}
                  {selectedEvent.location && (
                    <div>
                      <span className="font-medium">Local: </span>
                      <span>{selectedEvent.location}</span>
                    </div>
                  )}
                </div>
              </div>
            </DialogContent>
          )}
        </Dialog>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/projects/project-filter.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { Search, Filter, X } from "lucide-react"

interface ProjectFilterProps {
  onFilter: (filters: any) => void
}

export function ProjectFilter({ onFilter }: ProjectFilterProps) {
  const [filters, setFilters] = useState({
    search: "",
    status: "",
    type: "",
    teamId: "",
    dateRange: {
      from: undefined,
      to: undefined,
    },
  })

const handleChange = (field: string, value: any) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleDateRangeChange = (range: { from?: Date; to?: Date }) => {
    setFilters((prev) => ({
      ...prev,
      dateRange: range,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onFilter(filters)
  }

const handleReset = () => {
    setFilters({
      search: "",
      status: "",
      type: "",
      teamId: "",
      dateRange: {
        from: undefined,
        to: undefined,
      },
    })
    onFilter({})
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4 p-4 border rounded-lg bg-background">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1">
          <Label htmlFor="search">Buscar</Label>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="search"
              placeholder="Nome do projeto ou cliente"
              className="pl-8"
              value={filters.search}
              onChange={(e) => handleChange("search", e.target.value)}
            />
          </div>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="status">Status</Label>
          <Select value={filters.status} onValueChange={(value) => handleChange("status", value)}>
            <SelectTrigger id="status">
              <SelectValue placeholder="Todos" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="pending">Pendente</SelectItem>
              <SelectItem value="in-progress">Em Andamento</SelectItem>
              <SelectItem value="completed">Concluído</SelectItem>
              <SelectItem value="delayed">Atrasado</SelectItem>
              <SelectItem value="cancelled">Cancelado</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="type">Tipo</Label>
          <Select value={filters.type} onValueChange={(value) => handleChange("type", value)}>
            <SelectTrigger id="type">
              <SelectValue placeholder="Todos" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="residential">Residencial</SelectItem>
              <SelectItem value="commercial">Comercial</SelectItem>
              <SelectItem value="industrial">Industrial</SelectItem>
              <SelectItem value="rural">Rural</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="flex flex-col md:flex-row gap-4 items-end">
        <div className="w-full md:w-[250px]">
          <Label htmlFor="teamId">Equipe</Label>
          <Select value={filters.teamId} onValueChange={(value) => handleChange("teamId", value)}>
            <SelectTrigger id="teamId">
              <SelectValue placeholder="Todas" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todas</SelectItem>
              <SelectItem value="team-1">Equipe Alpha</SelectItem>
              <SelectItem value="team-2">Equipe Beta</SelectItem>
              <SelectItem value="team-3">Equipe Gamma</SelectItem>
              <SelectItem value="team-4">Equipe Delta</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="flex-1">
          <Label>Período</Label>
          <DateRangePicker value={filters.dateRange} onChange={handleDateRangeChange} />
        </div>

<div className="flex gap-2">
          <Button type="submit" variant="default">
            <Filter className="mr-2 h-4 w-4" />
            Filtrar
          </Button>
          <Button type="button" variant="outline" onClick={handleReset}>
            <X className="mr-2 h-4 w-4" />
            Limpar
          </Button>
        </div>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/teams/team-filter.tsx" isFixed="true" isQuickEdit="true"
"use client"

import type React from "react"

interface TeamFilterProps {
  onFilter: (filters: any) => void
}

export function TeamFilter({ onFilter }: TeamFilterProps) {
  const [filters, setFilters] = useState({
    search: "",
    status: "",
    specialization: "",
    region: "",
  })

const handleChange = (field: string, value: any) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onFilter(filters)
  }

const handleReset = () => {
    setFilters({
      search: "",
      status: "",
      specialization: "",
      region: "",
    })
    onFilter({})
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4 p-4 border rounded-lg bg-background">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1">
          <Label htmlFor="search">Buscar</Label>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="search"
              placeholder="Nome da equipe ou membro"
              className="pl-8"
              value={filters.search}
              onChange={(e) => handleChange("search", e.target.value)}
            />
          </div>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="status">Status</Label>
          <Select value={filters.status} onValueChange={(value) => handleChange("status", value)}>
            <SelectTrigger id="status">
              <SelectValue placeholder="Todos" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="available">Disponível</SelectItem>
              <SelectItem value="assigned">Designada</SelectItem>
              <SelectItem value="on-leave">Em Licença</SelectItem>
              <SelectItem value="training">Em Treinamento</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="specialization">Especialização</Label>
          <Select value={filters.specialization} onValueChange={(value) => handleChange("specialization", value)}>
            <SelectTrigger id="specialization">
              <SelectValue placeholder="Todas" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todas</SelectItem>
              <SelectItem value="residential">Residencial</SelectItem>
              <SelectItem value="commercial">Comercial</SelectItem>
              <SelectItem value="industrial">Industrial</SelectItem>
              <SelectItem value="maintenance">Manutenção</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="flex flex-col md:flex-row gap-4 items-end">
        <div className="w-full md:w-[250px]">
          <Label htmlFor="region">Região</Label>
          <Select value={filters.region} onValueChange={(value) => handleChange("region", value)}>
            <SelectTrigger id="region">
              <SelectValue placeholder="Todas" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todas</SelectItem>
              <SelectItem value="north">Norte</SelectItem>
              <SelectItem value="south">Sul</SelectItem>
              <SelectItem value="east">Leste</SelectItem>
              <SelectItem value="west">Oeste</SelectItem>
              <SelectItem value="central">Central</SelectItem>
            </SelectContent>
          </Select>
        </div>

import * as React from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { CalendarIcon } from "lucide-react"
import type { DateRange } from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Calendar } from "@/components/ui/calendar"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"

interface DateRangePickerProps {
  value?: DateRange
  onChange?: (date: DateRange) => void
  className?: string
}

export function DateRangePicker({ value, onChange, className }: DateRangePickerProps) {
  const [date, setDate] = React.useState<DateRange | undefined>(value)

React.useEffect(() => {
    setDate(value)
  }, [value])

return (
    <div className={cn("grid gap-2", className)}>
      <Popover>
        <PopoverTrigger asChild>
          <Button
            id="date"
            variant={"outline"}
            className={cn("w-full justify-start text-left font-normal", !date && "text-muted-foreground")}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date?.from ? (
              date.to ? (
                <>
                  {format(date.from, "dd/MM/yyyy", { locale: ptBR })} -{" "}
                  {format(date.to, "dd/MM/yyyy", { locale: ptBR })}
                </>
              ) : (
                format(date.from, "dd/MM/yyyy", { locale: ptBR })
              )
            ) : (
              <span>Selecione um período</span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            initialFocus
            mode="range"
            defaultMonth={date?.from}
            selected={date}
            onSelect={(newDate) => {
              setDate(newDate)
              onChange?.(newDate || { from: undefined, to: undefined })
            }}
            numberOfMonths={2}
            locale={ptBR}
          />
        </PopoverContent>
      </Popover>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/services/report-service.ts"
import type {
  ReportType,
  ReportFormat,
  ReportFilter,
  ReportTemplate,
  ScheduledReport,
  ReportResult,
  ReportData,
} from "../types/report"

export class ReportService {
  /**
   * Obtém todos os modelos de relatório disponíveis
   */
  async getReportTemplates(): Promise<ReportTemplate[]> {
    try {
      const response = await fetch("/api/installation/reports/templates")
      if (!response.ok) throw new Error("Falha ao buscar modelos de relatório")
      return await response.json()
    } catch (error) {
      console.error("Erro ao buscar modelos de relatório:", error)
      throw error
    }
  }

/**
   * Obtém um modelo de relatório específico por ID
   */
  async getReportTemplateById(id: string): Promise<ReportTemplate | null> {
    try {
      const response = await fetch(`/api/installation/reports/templates/${id}`)
      if (response.status === 404) return null
      if (!response.ok) throw new Error("Falha ao buscar modelo de relatório")
      return await response.json()
    } catch (error) {
      console.error(`Erro ao buscar modelo de relatório ${id}:`, error)
      throw error
    }
  }

/**
   * Cria um novo modelo de relatório
   */
  async createReportTemplate(
    template: Omit<ReportTemplate, "id" | "createdAt" | "updatedAt">,
  ): Promise<ReportTemplate> {
    try {
      const response = await fetch("/api/installation/reports/templates", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(template),
      })
      if (!response.ok) throw new Error("Falha ao criar modelo de relatório")
      return await response.json()
    } catch (error) {
      console.error("Erro ao criar modelo de relatório:", error)
      throw error
    }
  }

/**
   * Atualiza um modelo de relatório existente
   */
  async updateReportTemplate(id: string, template: Partial<ReportTemplate>): Promise<ReportTemplate> {
    try {
      const response = await fetch(`/api/installation/reports/templates/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(template),
      })
      if (!response.ok) throw new Error("Falha ao atualizar modelo de relatório")
      return await response.json()
    } catch (error) {
      console.error(`Erro ao atualizar modelo de relatório ${id}:`, error)
      throw error
    }
  }

/**
   * Exclui um modelo de relatório
   */
  async deleteReportTemplate(id: string): Promise<boolean> {
    try {
      const response = await fetch(`/api/installation/reports/templates/${id}`, {
        method: "DELETE",
      })
      if (!response.ok) throw new Error("Falha ao excluir modelo de relatório")
      return true
    } catch (error) {
      console.error(`Erro ao excluir modelo de relatório ${id}:`, error)
      throw error
    }
  }

/**
   * Gera um relatório com base em um modelo e filtros
   */
  async generateReport(
    templateId: string,
    format: ReportFormat,
    filters?: ReportFilter,
  ): Promise<{ reportId: string; downloadUrl: string }> {
    try {
      const response = await fetch("/api/installation/reports/generate", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          templateId,
          format,
          filters,
        }),
      })
      if (!response.ok) throw new Error("Falha ao gerar relatório")
      return await response.json()
    } catch (error) {
      console.error("Erro ao gerar relatório:", error)
      throw error
    }
  }

/**
   * Obtém uma prévia dos dados do relatório sem gerar o arquivo
   */
  async previewReport(templateId: string, filters?: ReportFilter): Promise<ReportData> {
    try {
      const response = await fetch("/api/installation/reports/preview", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          templateId,
          filters,
        }),
      })
      if (!response.ok) throw new Error("Falha ao obter prévia do relatório")
      return await response.json()
    } catch (error) {
      console.error("Erro ao obter prévia do relatório:", error)
      throw error
    }
  }

/**
   * Obtém o histórico de relatórios gerados
   */
  async getReportHistory(
    filters?: {
      startDate?: Date
      endDate?: Date
      templateId?: string
      format?: ReportFormat
      generatedBy?: string
    },
    page = 1,
    limit = 10,
  ): Promise<{ results: ReportResult[]; total: number; page: number; limit: number }> {
    try {
      const queryParams = new URLSearchParams()
      queryParams.append("page", page.toString())
      queryParams.append("limit", limit.toString())

if (filters?.startDate) queryParams.append("startDate", filters.startDate.toISOString())
      if (filters?.endDate) queryParams.append("endDate", filters.endDate.toISOString())
      if (filters?.templateId) queryParams.append("templateId", filters.templateId)
      if (filters?.format) queryParams.append("format", filters.format)
      if (filters?.generatedBy) queryParams.append("generatedBy", filters.generatedBy)

const response = await fetch(`/api/installation/reports/history?${queryParams.toString()}`)
      if (!response.ok) throw new Error("Falha ao buscar histórico de relatórios")
      return await response.json()
    } catch (error) {
      console.error("Erro ao buscar histórico de relatórios:", error)
      throw error
    }
  }

/**
   * Agenda um relatório para geração recorrente
   */
  async scheduleReport(
    scheduledReport: Omit<ScheduledReport, "id" | "createdAt" | "updatedAt" | "lastRunDate" | "nextRunDate">,
  ): Promise<ScheduledReport> {
    try {
      const response = await fetch("/api/installation/reports/schedule", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(scheduledReport),
      })
      if (!response.ok) throw new Error("Falha ao agendar relatório")
      return await response.json()
    } catch (error) {
      console.error("Erro ao agendar relatório:", error)
      throw error
    }
  }

/**
   * Obtém todos os relatórios agendados
   */
  async getScheduledReports(): Promise<ScheduledReport[]> {
    try {
      const response = await fetch("/api/installation/reports/schedule")
      if (!response.ok) throw new Error("Falha ao buscar relatórios agendados")
      return await response.json()
    } catch (error) {
      console.error("Erro ao buscar relatórios agendados:", error)
      throw error
    }
  }

/**
   * Atualiza um relatório agendado
   */
  async updateScheduledReport(id: string, updates: Partial<ScheduledReport>): Promise<ScheduledReport> {
    try {
      const response = await fetch(`/api/installation/reports/schedule/${id}`, {
        method: "PUT",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updates),
      })
      if (!response.ok) throw new Error("Falha ao atualizar relatório agendado")
      return await response.json()
    } catch (error) {
      console.error(`Erro ao atualizar relatório agendado ${id}:`, error)
      throw error
    }
  }

/**
   * Cancela um relatório agendado
   */
  async cancelScheduledReport(id: string): Promise<boolean> {
    try {
      const response = await fetch(`/api/installation/reports/schedule/${id}`, {
        method: "DELETE",
      })
      if (!response.ok) throw new Error("Falha ao cancelar relatório agendado")
      return true
    } catch (error) {
      console.error(`Erro ao cancelar relatório agendado ${id}:`, error)
      throw error
    }
  }

/**
   * Compartilha um relatório gerado com outros usuários
   */
  async shareReport(reportId: string, emails: string[], message?: string): Promise<boolean> {
    try {
      const response = await fetch(`/api/installation/reports/${reportId}/share`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          emails,
          message,
        }),
      })
      if (!response.ok) throw new Error("Falha ao compartilhar relatório")
      return true
    } catch (error) {
      console.error(`Erro ao compartilhar relatório ${reportId}:`, error)
      throw error
    }
  }

/**
   * Obtém as colunas disponíveis para um tipo de relatório
   */
  async getAvailableColumns(reportType: ReportType): Promise<{ id: string; label: string; field: string }[]> {
    try {
      const response = await fetch(`/api/installation/reports/columns?type=${reportType}`)
      if (!response.ok) throw new Error("Falha ao buscar colunas disponíveis")
      return await response.json()
    } catch (error) {
      console.error(`Erro ao buscar colunas disponíveis para ${reportType}:`, error)
      throw error
    }
  }
}

export const reportService = new ReportService()
[V0_FILE]typescriptreact:file="modules/installation/hooks/use-reports.ts"
"use client"

import { useState, useCallback, useEffect } from "react"
import { reportService } from "../services/report-service"
import type {
  ReportTemplate,
  ReportFilter,
  ReportFormat,
  ReportResult,
  ScheduledReport,
  ReportData,
  ReportType,
} from "../types/report"

export function useReports() {
  const [templates, setTemplates] = useState<ReportTemplate[]>([])
  const [selectedTemplate, setSelectedTemplate] = useState<ReportTemplate | null>(null)
  const [reportHistory, setReportHistory] = useState<ReportResult[]>([])
  const [scheduledReports, setScheduledReports] = useState<ScheduledReport[]>([])
  const [previewData, setPreviewData] = useState<ReportData | null>(null)
  const [loading, setLoading] = useState({
    templates: false,
    selectedTemplate: false,
    history: false,
    scheduled: false,
    preview: false,
    generate: false,
  })
  const [error, setError] = useState<string | null>(null)

// Carregar modelos de relatório
  const loadTemplates = useCallback(async () => {
    setLoading((prev) => ({ ...prev, templates: true }))
    setError(null)
    try {
      const data = await reportService.getReportTemplates()
      setTemplates(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao carregar modelos de relatório")
    } finally {
      setLoading((prev) => ({ ...prev, templates: false }))
    }
  }, [])

// Carregar um modelo específico
  const loadTemplate = useCallback(async (id: string) => {
    setLoading((prev) => ({ ...prev, selectedTemplate: true }))
    setError(null)
    try {
      const data = await reportService.getReportTemplateById(id)
      setSelectedTemplate(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao carregar modelo de relatório")
    } finally {
      setLoading((prev) => ({ ...prev, selectedTemplate: false }))
    }
  }, [])

// Criar um novo modelo de relatório
  const createTemplate = useCallback(async (template: Omit<ReportTemplate, "id" | "createdAt" | "updatedAt">) => {
    setLoading((prev) => ({ ...prev, templates: true }))
    setError(null)
    try {
      const newTemplate = await reportService.createReportTemplate(template)
      setTemplates((prev) => [...prev, newTemplate])
      return newTemplate
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao criar modelo de relatório")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, templates: false }))
    }
  }, [])

// Atualizar um modelo existente
  const updateTemplate = useCallback(
    async (id: string, updates: Partial<ReportTemplate>) => {
      setLoading((prev) => ({ ...prev, templates: true }))
      setError(null)
      try {
        const updatedTemplate = await reportService.updateReportTemplate(id, updates)
        setTemplates((prev) => prev.map((t) => (t.id === id ? updatedTemplate : t)))
        if (selectedTemplate?.id === id) {
          setSelectedTemplate(updatedTemplate)
        }
        return updatedTemplate
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro ao atualizar modelo de relatório")
        throw err
      } finally {
        setLoading((prev) => ({ ...prev, templates: false }))
      }
    },
    [selectedTemplate],
  )

// Excluir um modelo
  const deleteTemplate = useCallback(
    async (id: string) => {
      setLoading((prev) => ({ ...prev, templates: true }))
      setError(null)
      try {
        await reportService.deleteReportTemplate(id)
        setTemplates((prev) => prev.filter((t) => t.id !== id))
        if (selectedTemplate?.id === id) {
          setSelectedTemplate(null)
        }
        return true
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro ao excluir modelo de relatório")
        throw err
      } finally {
        setLoading((prev) => ({ ...prev, templates: false }))
      }
    },
    [selectedTemplate],
  )

// Gerar um relatório
  const generateReport = useCallback(async (templateId: string, format: ReportFormat, filters?: ReportFilter) => {
    setLoading((prev) => ({ ...prev, generate: true }))
    setError(null)
    try {
      const result = await reportService.generateReport(templateId, format, filters)
      // Atualizar o histórico após gerar um novo relatório
      loadReportHistory()
      return result
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao gerar relatório")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, generate: false }))
    }
  }, [])

// Obter prévia do relatório
  const previewReport = useCallback(async (templateId: string, filters?: ReportFilter) => {
    setLoading((prev) => ({ ...prev, preview: true }))
    setError(null)
    try {
      const data = await reportService.previewReport(templateId, filters)
      setPreviewData(data)
      return data
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao obter prévia do relatório")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, preview: false }))
    }
  }, [])

// Carregar histórico de relatórios
  const loadReportHistory = useCallback(
    async (filters?: Parameters<typeof reportService.getReportHistory>[0], page = 1, limit = 10) => {
      setLoading((prev) => ({ ...prev, history: true }))
      setError(null)
      try {
        const data = await reportService.getReportHistory(filters, page, limit)
        setReportHistory(data.results)
        return data
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro ao carregar histórico de relatórios")
        throw err
      } finally {
        setLoading((prev) => ({ ...prev, history: false }))
      }
    },
    [],
  )

// Agendar um relatório
  const scheduleReport = useCallback(
    async (
      scheduledReport: Omit<ScheduledReport, "id" | "createdAt" | "updatedAt" | "lastRunDate" | "nextRunDate">,
    ) => {
      setLoading((prev) => ({ ...prev, scheduled: true }))
      setError(null)
      try {
        const result = await reportService.scheduleReport(scheduledReport)
        setScheduledReports((prev) => [...prev, result])
        return result
      } catch (err) {
        setError(err instanceof Error ? err.message : "Erro ao agendar relatório")
        throw err
      } finally {
        setLoading((prev) => ({ ...prev, scheduled: false }))
      }
    },
    [],
  )

// Carregar relatórios agendados
  const loadScheduledReports = useCallback(async () => {
    setLoading((prev) => ({ ...prev, scheduled: true }))
    setError(null)
    try {
      const data = await reportService.getScheduledReports()
      setScheduledReports(data)
      return data
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao carregar relatórios agendados")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, scheduled: false }))
    }
  }, [])

// Atualizar um relatório agendado
  const updateScheduledReport = useCallback(async (id: string, updates: Partial<ScheduledReport>) => {
    setLoading((prev) => ({ ...prev, scheduled: true }))
    setError(null)
    try {
      const updatedReport = await reportService.updateScheduledReport(id, updates)
      setScheduledReports((prev) => prev.map((r) => (r.id === id ? updatedReport : r)))
      return updatedReport
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao atualizar relatório agendado")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, scheduled: false }))
    }
  }, [])

// Cancelar um relatório agendado
  const cancelScheduledReport = useCallback(async (id: string) => {
    setLoading((prev) => ({ ...prev, scheduled: true }))
    setError(null)
    try {
      await reportService.cancelScheduledReport(id)
      setScheduledReports((prev) => prev.filter((r) => r.id !== id))
      return true
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao cancelar relatório agendado")
      throw err
    } finally {
      setLoading((prev) => ({ ...prev, scheduled: false }))
    }
  }, [])

// Compartilhar um relatório
  const shareReport = useCallback(async (reportId: string, emails: string[], message?: string) => {
    setError(null)
    try {
      return await reportService.shareReport(reportId, emails, message)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao compartilhar relatório")
      throw err
    }
  }, [])

// Obter colunas disponíveis para um tipo de relatório
  const getAvailableColumns = useCallback(async (reportType: ReportType) => {
    setError(null)
    try {
      return await reportService.getAvailableColumns(reportType)
    } catch (err) {
      setError(err instanceof Error ? err.message : "Erro ao obter colunas disponíveis")
      throw err
    }
  }, [])

// Carregar dados iniciais
  useEffect(() => {
    loadTemplates()
    loadReportHistory()
    loadScheduledReports()
  }, [loadTemplates, loadReportHistory, loadScheduledReports])

return {
    templates,
    selectedTemplate,
    reportHistory,
    scheduledReports,
    previewData,
    loading,
    error,
    loadTemplates,
    loadTemplate,
    createTemplate,
    updateTemplate,
    deleteTemplate,
    generateReport,
    previewReport,
    loadReportHistory,
    scheduleReport,
    loadScheduledReports,
    updateScheduledReport,
    cancelScheduledReport,
    shareReport,
    getAvailableColumns,
  }
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/index.ts"
export * from "./report-list"
export * from "./report-generator"
export * from "./report-template-form"
export * from "./report-preview"
export * from "./report-history"
export * from "./report-scheduler"
export * from "./report-filter"
export * from "./report-share-dialog"
export * from "./report-column-selector"
export * from "./report-type-selector"
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-list.tsx"
"use client"

import { useState } from "react"
import { useReports } from "../../hooks/use-reports"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { FileText, MoreHorizontal, Edit, Trash, Copy, Calendar, Download, Eye } from "lucide-react"
import { ReportType, ReportFormat } from "../../types/report"
import { formatDate } from "../../utils/date-utils"

interface ReportListProps {
  onCreateTemplate: () => void
  onEditTemplate: (templateId: string) => void
  onGenerateReport: (templateId: string) => void
  onScheduleReport: (templateId: string) => void
  onPreviewReport: (templateId: string) => void
}

export function ReportList({
  onCreateTemplate,
  onEditTemplate,
  onGenerateReport,
  onScheduleReport,
  onPreviewReport,
}: ReportListProps) {
  const { templates, loading, error, deleteTemplate, loadTemplates } = useReports()
  const [searchTerm, setSearchTerm] = useState("")

const handleDeleteTemplate = async (id: string) => {
    if (window.confirm("Tem certeza que deseja excluir este modelo de relatório?")) {
      try {
        await deleteTemplate(id)
      } catch (error) {
        console.error("Erro ao excluir modelo:", error)
      }
    }
  }

const handleDuplicateTemplate = async (id: string) => {
    const template = templates.find((t) => t.id === id)
    if (!template) return

try {
      // Criar uma cópia do template com um novo nome
      const { id: _, createdAt, updatedAt, ...templateData } = template
      await onEditTemplate(id)
    } catch (error) {
      console.error("Erro ao duplicar modelo:", error)
    }
  }

const filteredTemplates = templates.filter(
    (template) =>
      template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      template.description?.toLowerCase().includes(searchTerm.toLowerCase()),
  )

const getReportTypeLabel = (type: ReportType) => {
    switch (type) {
      case ReportType.PROJECT_SUMMARY:
        return "Resumo de Projetos"
      case ReportType.INSTALLATION_DETAILS:
        return "Detalhes de Instalação"
      case ReportType.PROGRESS_REPORT:
        return "Relatório de Progresso"
      case ReportType.TEAM_PERFORMANCE:
        return "Desempenho de Equipes"
      case ReportType.EQUIPMENT_USAGE:
        return "Uso de Equipamentos"
      case ReportType.FINANCIAL_SUMMARY:
        return "Resumo Financeiro"
      case ReportType.INSPECTION_RESULTS:
        return "Resultados de Inspeção"
      case ReportType.CUSTOM:
        return "Personalizado"
      default:
        return type
    }
  }

const getFormatLabel = (format: ReportFormat) => {
    switch (format) {
      case ReportFormat.PDF:
        return "PDF"
      case ReportFormat.EXCEL:
        return "Excel"
      case ReportFormat.CSV:
        return "CSV"
      case ReportFormat.HTML:
        return "HTML"
      default:
        return format
    }
  }

const getFormatBadgeColor = (format: ReportFormat) => {
    switch (format) {
      case ReportFormat.PDF:
        return "bg-red-500"
      case ReportFormat.EXCEL:
        return "bg-green-500"
      case ReportFormat.CSV:
        return "bg-blue-500"
      case ReportFormat.HTML:
        return "bg-purple-500"
      default:
        return "bg-gray-500"
    }
  }

const getTypeIcon = (type: ReportType) => {
    switch (type) {
      case ReportType.PROJECT_SUMMARY:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.INSTALLATION_DETAILS:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.PROGRESS_REPORT:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.TEAM_PERFORMANCE:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.EQUIPMENT_USAGE:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.FINANCIAL_SUMMARY:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.INSPECTION_RESULTS:
        return <FileText className="h-4 w-4 mr-2" />
      case ReportType.CUSTOM:
        return <FileText className="h-4 w-4 mr-2" />
      default:
        return <FileText className="h-4 w-4 mr-2" />
    }
  }

if (error) {
    return <div className="text-red-500">Erro: {error}</div>
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Modelos de Relatórios</CardTitle>
        <Button onClick={onCreateTemplate}>Novo Modelo</Button>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <Input
            placeholder="Buscar modelos de relatório..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="max-w-sm"
          />
        </div>

<div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nome</TableHead>
                <TableHead>Tipo</TableHead>
                <TableHead>Formato</TableHead>
                <TableHead>Criado em</TableHead>
                <TableHead>Criado por</TableHead>
                <TableHead className="w-[100px]">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    Carregando...
                  </TableCell>
                </TableRow>
              ) : filteredTemplates.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    Nenhum modelo de relatório encontrado
                  </TableCell>
                </TableRow>
              ) : (
                filteredTemplates.map((template) => (
                  <TableRow key={template.id}>
                    <TableCell className="font-medium">
                      <div className="flex items-center">
                        {getTypeIcon(template.type)}
                        <span>{template.name}</span>
                        {template.isDefault && (
                          <Badge variant="outline" className="ml-2">
                            Padrão
                          </Badge>
                        )}
                      </div>
                    </TableCell>
                    <TableCell>{getReportTypeLabel(template.type)}</TableCell>
                    <TableCell>
                      <Badge className={getFormatBadgeColor(template.format)}>{getFormatLabel(template.format)}</Badge>
                    </TableCell>
                    <TableCell>{formatDate(new Date(template.createdAt))}</TableCell>
                    <TableCell>{template.createdBy}</TableCell>
                    <TableCell>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">Abrir menu</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Ações</DropdownMenuLabel>
                          <DropdownMenuItem onClick={() => onGenerateReport(template.id)}>
                            <Download className="h-4 w-4 mr-2" />
                            Gerar Relatório
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => onPreviewReport(template.id)}>
                            <Eye className="h-4 w-4 mr-2" />
                            Visualizar
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => onScheduleReport(template.id)}>
                            <Calendar className="h-4 w-4 mr-2" />
                            Agendar
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem onClick={() => onEditTemplate(template.id)}>
                            <Edit className="h-4 w-4 mr-2" />
                            Editar
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDuplicateTemplate(template.id)}>
                            <Copy className="h-4 w-4 mr-2" />
                            Duplicar
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem onClick={() => handleDeleteTemplate(template.id)} className="text-red-600">
                            <Trash className="h-4 w-4 mr-2" />
                            Excluir
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-generator.tsx"
"use client"

import { useState } from "react"
import { useReports } from "../../hooks/use-reports"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ReportFilter } from "./report-filter"
import { ReportPreview } from "./report-preview"
import { ReportShareDialog } from "./report-share-dialog"
import { ReportFormat, type ReportFilter as ReportFilterType } from "../../types/report"
import { Loader2, Download, Eye, Share2 } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

interface ReportGeneratorProps {
  templateId?: string
  onBack?: () => void
}

export function ReportGenerator({ templateId, onBack }: ReportGeneratorProps) {
  const { templates, selectedTemplate, loading, error, loadTemplate, generateReport, previewReport, previewData } =
    useReports()
  const [selectedTemplateId, setSelectedTemplateId] = useState(templateId || "")
  const [selectedFormat, setSelectedFormat] = useState<ReportFormat>(ReportFormat.PDF)
  const [filters, setFilters] = useState<ReportFilterType>({})
  const [activeTab, setActiveTab] = useState("generate")
  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false)
  const [generatedReportId, setGeneratedReportId] = useState<string | null>(null)
  const [generatedReportUrl, setGeneratedReportUrl] = useState<string | null>(null)

const handleTemplateChange = async (id: string) => {
    setSelectedTemplateId(id)
    if (id) {
      await loadTemplate(id)
    }
  }

const handleFilterChange = (newFilters: ReportFilterType) => {
    setFilters(newFilters)
  }

const handleGenerateReport = async () => {
    if (!selectedTemplateId) {
      toast({
        title: "Erro",
        description: "Selecione um modelo de relatório",
        variant: "destructive",
      })
      return
    }

try {
      const result = await generateReport(selectedTemplateId, selectedFormat, filters)
      setGeneratedReportId(result.reportId)
      setGeneratedReportUrl(result.downloadUrl)

toast({
        title: "Relatório gerado com sucesso",
        description: "O relatório está pronto para download",
      })

// Abrir o relatório em uma nova aba
      window.open(result.downloadUrl, "_blank")
    } catch (error) {
      toast({
        title: "Erro ao gerar relatório",
        description: error instanceof Error ? error.message : "Ocorreu um erro ao gerar o relatório",
        variant: "destructive",
      })
    }
  }

const handlePreviewReport = async () => {
    if (!selectedTemplateId) {
      toast({
        title: "Erro",
        description: "Selecione um modelo de relatório",
        variant: "destructive",
      })
      return
    }

try {
      await previewReport(selectedTemplateId, filters)
      setActiveTab("preview")
    } catch (error) {
      toast({
        title: "Erro ao visualizar relatório",
        description: error instanceof Error ? error.message : "Ocorreu um erro ao visualizar o relatório",
        variant: "destructive",
      })
    }
  }

const handleShareReport = () => {
    if (generatedReportId) {
      setIsShareDialogOpen(true)
    } else {
      toast({
        title: "Erro",
        description: "Gere um relatório antes de compartilhar",
        variant: "destructive",
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Gerador de Relatórios</CardTitle>
            <CardDescription>Gere relatórios personalizados para instalações</CardDescription>
          </div>
          {onBack && (
            <Button variant="outline" onClick={onBack}>
              Voltar
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="generate">Gerar Relatório</TabsTrigger>
            <TabsTrigger value="preview" disabled={!previewData}>
              Visualizar
            </TabsTrigger>
          </TabsList>

<TabsContent value="generate">
            <div className="space-y-6">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="template">Modelo de Relatório</Label>
                  <Select value={selectedTemplateId} onValueChange={handleTemplateChange}>
                    <SelectTrigger id="template">
                      <SelectValue placeholder="Selecione um modelo" />
                    </SelectTrigger>
                    <SelectContent>
                      {templates.map((template) => (
                        <SelectItem key={template.id} value={template.id}>
                          {template.name}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>

<div>
                  <Label htmlFor="format">Formato</Label>
                  <Select value={selectedFormat} onValueChange={(value) => setSelectedFormat(value as ReportFormat)}>
                    <SelectTrigger id="format">
                      <SelectValue placeholder="Selecione um formato" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value={ReportFormat.PDF}>PDF</SelectItem>
                      <SelectItem value={ReportFormat.EXCEL}>Excel</SelectItem>
                      <SelectItem value={ReportFormat.CSV}>CSV</SelectItem>
                      <SelectItem value={ReportFormat.HTML}>HTML</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

{selectedTemplate && (
                <div className="border rounded-md p-4">
                  <h3 className="text-lg font-medium mb-2">{selectedTemplate.name}</h3>
                  {selectedTemplate.description && (
                    <p className="text-sm text-gray-500 mb-4">{selectedTemplate.description}</p>
                  )}
                  <ReportFilter
                    initialFilters={filters}
                    onChange={handleFilterChange}
                    reportType={selectedTemplate.type}
                  />
                </div>
              )}

<div className="flex justify-end space-x-2">
                <Button
                  variant="outline"
                  onClick={handlePreviewReport}
                  disabled={loading.preview || !selectedTemplateId}
                >
                  {loading.preview ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Carregando...
                    </>
                  ) : (
                    <>
                      <Eye className="mr-2 h-4 w-4" />
                      Visualizar
                    </>
                  )}
                </Button>
                <Button onClick={handleGenerateReport} disabled={loading.generate || !selectedTemplateId}>
                  {loading.generate ? (
                    <>
                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                      Gerando...
                    </>
                  ) : (
                    <>
                      <Download className="mr-2 h-4 w-4" />
                      Gerar Relatório
                    </>
                  )}
                </Button>
                {generatedReportId && (
                  <Button variant="outline" onClick={handleShareReport}>
                    <Share2 className="mr-2 h-4 w-4" />
                    Compartilhar
                  </Button>
                )}
              </div>
            </div>
          </TabsContent>

<TabsContent value="preview">{previewData && <ReportPreview data={previewData} />}</TabsContent>
        </Tabs>

{isShareDialogOpen && generatedReportId && (
          <ReportShareDialog
            reportId={generatedReportId}
            reportName={selectedTemplate?.name || "Relatório"}
            open={isShareDialogOpen}
            onOpenChange={setIsShareDialogOpen}
          />
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-template-form.tsx"
"use client"

import type React from "react"

import { useState, useEffect } from "react"
import { useReports } from "../../hooks/use-reports"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Checkbox } from "@/components/ui/checkbox"
import { ReportTypeSelector } from "./report-type-selector"
import { ReportColumnSelector } from "./report-column-selector"
import { ReportType, ReportFormat, type ReportTemplate } from "../../types/report"
import { Loader2 } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

interface ReportTemplateFormProps {
  templateId?: string
  onSaved: (template: ReportTemplate) => void
  onCancel: () => void
}

export function ReportTemplateForm({ templateId, onSaved, onCancel }: ReportTemplateFormProps) {
  const { loadTemplate, createTemplate, updateTemplate, loading, error, getAvailableColumns } = useReports()
  const [formData, setFormData] = useState<Partial<ReportTemplate>>({
    name: "",
    description: "",
    type: ReportType.PROJECT_SUMMARY,
    format: ReportFormat.PDF,
    filters: {},
    columns: [],
    isDefault: false,
    createdBy: "current-user", // Isso seria substituído pelo usuário atual
  })
  const [availableColumns, setAvailableColumns] = useState<{ id: string; label: string; field: string }[]>([])
  const [isLoading, setIsLoading] = useState(false)

useEffect(() => {
    const loadData = async () => {
      if (templateId) {
        setIsLoading(true)
        try {
          const template = await loadTemplate(templateId)
          if (template) {
            setFormData(template)
          }
        } catch (error) {
          console.error("Erro ao carregar modelo:", error)
          toast({
            title: "Erro",
            description: "Não foi possível carregar o modelo de relatório",
            variant: "destructive",
          })
        } finally {
          setIsLoading(false)
        }
      }
    }

loadData()
  }, [templateId, loadTemplate])

useEffect(() => {
    const loadColumns = async () => {
      if (formData.type) {
        try {
          const columns = await getAvailableColumns(formData.type)
          setAvailableColumns(columns)
        } catch (error) {
          console.error("Erro ao carregar colunas:", error)
        }
      }
    }

loadColumns()
  }, [formData.type, getAvailableColumns])

const handleChange = (field: string, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleTypeChange = (type: ReportType) => {
    setFormData((prev) => ({
      ...prev,
      type,
      columns: [], // Resetar colunas ao mudar o tipo
    }))
  }

const handleColumnsChange = (columns: string[]) => {
    setFormData((prev) => ({
      ...prev,
      columns,
    }))
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

if (!formData.name || !formData.type || !formData.format) {
      toast({
        title: "Erro",
        description: "Preencha todos os campos obrigatórios",
        variant: "destructive",
      })
      return
    }

if (formData.columns && formData.columns.length === 0) {
      toast({
        title: "Erro",
        description: "Selecione pelo menos uma coluna para o relatório",
        variant: "destructive",
      })
      return
    }

try {
      let savedTemplate: ReportTemplate

if (templateId) {
        savedTemplate = await updateTemplate(templateId, formData)
        toast({
          title: "Sucesso",
          description: "Modelo de relatório atualizado com sucesso",
        })
      } else {
        savedTemplate = await createTemplate(formData as Omit<ReportTemplate, "id" | "createdAt" | "updatedAt">)
        toast({
          title: "Sucesso",
          description: "Modelo de relatório criado com sucesso",
        })
      }

onSaved(savedTemplate)
    } catch (error) {
      toast({
        title: "Erro",
        description: error instanceof Error ? error.message : "Ocorreu um erro ao salvar o modelo de relatório",
        variant: "destructive",
      })
    }
  }

if (isLoading) {
    return (
      <Card>
        <CardContent className="pt-6">
          <div className="flex justify-center items-center h-40">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
          </div>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>{templateId ? "Editar Modelo de Relatório" : "Novo Modelo de Relatório"}</CardTitle>
        <CardDescription>
          {templateId
            ? "Atualize as informações do modelo de relatório"
            : "Crie um novo modelo de relatório personalizado"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <div>
              <Label htmlFor="name">Nome do Modelo *</Label>
              <Input
                id="name"
                value={formData.name || ""}
                onChange={(e) => handleChange("name", e.target.value)}
                required
              />
            </div>

<div>
              <Label htmlFor="description">Descrição</Label>
              <Textarea
                id="description"
                value={formData.description || ""}
                onChange={(e) => handleChange("description", e.target.value)}
                rows={3}
              />
            </div>

<div>
              <Label>Tipo de Relatório *</Label>
              <ReportTypeSelector value={formData.type as ReportType} onChange={handleTypeChange} />
            </div>

<div>
              <Label>Formato de Saída *</Label>
              <div className="grid grid-cols-4 gap-2 mt-2">
                {Object.values(ReportFormat).map((format) => (
                  <Button
                    key={format}
                    type="button"
                    variant={formData.format === format ? "default" : "outline"}
                    onClick={() => handleChange("format", format)}
                    className="justify-start"
                  >
                    {format === ReportFormat.PDF
                      ? "PDF"
                      : format === ReportFormat.EXCEL
                        ? "Excel"
                        : format === ReportFormat.CSV
                          ? "CSV"
                          : "HTML"}
                  </Button>
                ))}
              </div>
            </div>

<div>
              <Label>Colunas do Relatório *</Label>
              <ReportColumnSelector
                availableColumns={availableColumns}
                selectedColumns={formData.columns || []}
                onChange={handleColumnsChange}
              />
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="isDefault"
                checked={formData.isDefault || false}
                onCheckedChange={(checked) => handleChange("isDefault", checked)}
              />
              <Label htmlFor="isDefault" className="cursor-pointer">
                Definir como modelo padrão para este tipo de relatório
              </Label>
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onCancel}>
          Cancelar
        </Button>
        <Button onClick={handleSubmit} disabled={loading.templates}>
          {loading.templates ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Salvando...
            </>
          ) : (
            "Salvar Modelo"
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-preview.tsx"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import type { ReportData, ReportSection } from "../../types/report"
import { formatDate } from "../../utils/date-utils"

interface ReportPreviewProps {
  data: ReportData
}

export function ReportPreview({ data }: ReportPreviewProps) {
  const renderSection = (section: ReportSection) => {
    switch (section.type) {
      case "table":
        return renderTableSection(section)
      case "summary":
        return renderSummarySection(section)
      case "text":
        return renderTextSection(section)
      case "chart":
        return renderChartSection(section)
      default:
        return null
    }
  }

const renderTableSection = (section: ReportSection) => {
    if (!section.data || !section.columns || section.data.length === 0) {
      return <div className="text-center py-4 text-gray-500">Nenhum dado disponível</div>
    }

return (
      <div className="rounded-md border overflow-hidden">
        <Table>
          <TableHeader>
            <TableRow>
              {section.columns
                .filter((col) => col.visible !== false)
                .map((column) => (
                  <TableHead key={column.id}>{column.label}</TableHead>
                ))}
            </TableRow>
          </TableHeader>
          <TableBody>
            {section.data.map((row: any, index: number) => (
              <TableRow key={index}>
                {section.columns
                  .filter((col) => col.visible !== false)
                  .map((column) => (
                    <TableCell key={column.id}>
                      {formatCellValue(row[column.field], column.type, column.formatter)}
                    </TableCell>
                  ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    )
  }

const renderSummarySection = (section: ReportSection) => {
    if (!section.data) return null

return (
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {Object.entries(section.data).map(([key, value]) => (
          <Card key={key} className="bg-muted/50">
            <CardContent className="p-4">
              <div className="text-sm text-muted-foreground">{key}</div>
              <div className="text-2xl font-bold mt-1">{formatSummaryValue(value)}</div>
            </CardContent>
          </Card>
        ))}
      </div>
    )
  }

const renderTextSection = (section: ReportSection) => {
    return (
      <div className="prose max-w-none">
        <div dangerouslySetInnerHTML={{ __html: section.data }} />
      </div>
    )
  }

const renderChartSection = (section: ReportSection) => {
    // Em uma implementação real, aqui renderizaríamos um gráfico
    // usando uma biblioteca como Chart.js, Recharts, etc.
    return (
      <div className="h-64 bg-muted/30 rounded-md flex items-center justify-center">
        <div className="text-muted-foreground">
          [Visualização de gráfico {section.chartType} seria renderizada aqui]
        </div>
      </div>
    )
  }

const formatCellValue = (value: any, type: string, formatter?: string) => {
    if (value === null || value === undefined) return "-"

switch (type) {
      case "date":
        return formatDate(new Date(value))
      case "boolean":
        return value ? "Sim" : "Não"
      case "number":
        return typeof value === "number" ? value.toLocaleString() : value
      case "currency":
        return typeof value === "number" ? value.toLocaleString("pt-BR", { style: "currency", currency: "BRL" }) : value
      case "percentage":
        return typeof value === "number" ? `${value.toFixed(2)}%` : value
      default:
        return value
    }
  }

const formatSummaryValue = (value: any) => {
    if (typeof value === "number") {
      return value.toLocaleString()
    }
    if (value instanceof Date) {
      return formatDate(value)
    }
    return value
  }

return (
    <div className="space-y-6">
      <div>
        <h2 className="text-2xl font-bold">{data.title}</h2>
        {data.description && <p className="text-muted-foreground mt-1">{data.description}</p>}
        <div className="flex items-center text-sm text-muted-foreground mt-2">
          <span>Gerado em: {formatDate(new Date(data.generatedAt))}</span>
          <span className="mx-2">•</span>
          <span>Por: {data.generatedBy}</span>
        </div>
      </div>

{data.filters && Object.keys(data.filters).length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Filtros Aplicados</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {data.filters.dateRange && (
                <Badge variant="outline" className="text-xs">
                  Período: {formatDate(new Date(data.filters.dateRange.startDate))} a{" "}
                  {formatDate(new Date(data.filters.dateRange.endDate))}
                </Badge>
              )}
              {data.filters.statuses && data.filters.statuses.length > 0 && (
                <Badge variant="outline" className="text-xs">
                  Status: {data.filters.statuses.join(", ")}
                </Badge>
              )}
              {data.filters.priorities && data.filters.priorities.length > 0 && (
                <Badge variant="outline" className="text-xs">
                  Prioridade: {data.filters.priorities.join(", ")}
                </Badge>
              )}
              {data.filters.locations?.city && (
                <Badge variant="outline" className="text-xs">
                  Cidade: {data.filters.locations.city}
                </Badge>
              )}
              {data.filters.locations?.state && (
                <Badge variant="outline" className="text-xs">
                  Estado: {data.filters.locations.state}
                </Badge>
              )}
              {data.filters.systemSizeRange && (
                <Badge variant="outline" className="text-xs">
                  Tamanho: {data.filters.systemSizeRange.min} - {data.filters.systemSizeRange.max} kWp
                </Badge>
              )}
            </div>
          </CardContent>
        </Card>
      )}

{data.sections.map((section, index) => (
        <Card key={index}>
          <CardHeader>
            <CardTitle>{section.title}</CardTitle>
          </CardHeader>
          <CardContent>{renderSection(section)}</CardContent>
        </Card>
      ))}

{data.summary && (
        <Card>
          <CardHeader>
            <CardTitle>Resumo</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {Object.entries(data.summary).map(([key, value]) => (
                <div key={key} className="flex flex-col">
                  <span className="text-sm text-muted-foreground">{key}</span>
                  <span className="text-lg font-medium">{formatSummaryValue(value)}</span>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-history.tsx"
"use client"

import { useState, useEffect } from "react"
import { useReports } from "../../hooks/use-reports"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { ReportFormat } from "../../types/report"
import { formatDate } from "../../utils/date-utils"
import { formatFileSize } from "../../utils/format-utils"
import { Download, MoreHorizontal, Share2, Trash } from "lucide-react"
import { ReportShareDialog } from "./report-share-dialog"
import { toast } from "@/components/ui/use-toast"

export function ReportHistory() {
  const { reportHistory, loading, error, loadReportHistory, shareReport } = useReports()
  const [searchTerm, setSearchTerm] = useState("")
  const [isShareDialogOpen, setIsShareDialogOpen] = useState(false)
  const [selectedReportId, setSelectedReportId] = useState<string | null>(null)
  const [selectedReportName, setSelectedReportName] = useState<string | null>(null)

useEffect(() => {
    loadReportHistory()
  }, [loadReportHistory])

const handleDownload = (fileUrl: string) => {
    window.open(fileUrl, "_blank")
  }

const handleShare = (reportId: string, reportName: string) => {
    setSelectedReportId(reportId)
    setSelectedReportName(reportName)
    setIsShareDialogOpen(true)
  }

const handleDelete = async (reportId: string) => {
    // Implementação da exclusão de relatório
    toast({
      title: "Funcionalidade não implementada",
      description: "A exclusão de relatórios será implementada em uma versão futura.",
    })
  }

const filteredReports = reportHistory.filter((report) => report.name.toLowerCase().includes(searchTerm.toLowerCase()))

if (error) {
    return <div className="text-red-500">Erro: {error}</div>
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Histórico de Relatórios</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="mb-4">
          <Input
            placeholder="Buscar relatórios..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="max-w-sm"
          />
        </div>

<div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Nome</TableHead>
                <TableHead>Formato</TableHead>
                <TableHead>Tamanho</TableHead>
                <TableHead>Gerado em</TableHead>
                <TableHead>Gerado por</TableHead>
                <TableHead className="w-[100px]">Ações</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading.history ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    Carregando...
                  </TableCell>
                </TableRow>
              ) : filteredReports.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={6} className="text-center py-4">
                    Nenhum relatório encontrado
                  </TableCell>
                </TableRow>
              ) : (
                filteredReports.map((report) => (
                  <TableRow key={report.id}>
                    <TableCell className="font-medium">{report.name}</TableCell>
                    <TableCell>
                      <Badge className={getFormatBadgeColor(report.format)}>{report.format}</Badge>
                    </TableCell>
                    <TableCell>{formatFileSize(report.fileSize)}</TableCell>
                    <TableCell>{formatDate(new Date(report.generatedAt))}</TableCell>
                    <TableCell>{report.generatedBy}</TableCell>
                    <TableCell>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">Abrir menu</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>Ações</DropdownMenuLabel>
                          <DropdownMenuItem onClick={() => handleDownload(report.fileUrl)}>
                            <Download className="h-4 w-4 mr-2" />
                            Download
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleShare(report.id, report.name)}>
                            <Share2 className="h-4 w-4 mr-2" />
                            Compartilhar
                          </DropdownMenuItem>
                          <DropdownMenuItem onClick={() => handleDelete(report.id)} className="text-red-600">
                            <Trash className="h-4 w-4 mr-2" />
                            Excluir
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

{isShareDialogOpen && selectedReportId && selectedReportName && (
          <ReportShareDialog
            reportId={selectedReportId}
            reportName={selectedReportName}
            open={isShareDialogOpen}
            onOpenChange={setIsShareDialogOpen}
          />
        )}
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-scheduler.tsx"
"use client"

import type React from "react"

import { useState } from "react"
import { useReports } from "../../hooks/use-reports"
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"
import { ReportFrequency } from "../../types/report"
import { Loader2, Plus, X } from "lucide-react"
import { toast } from "@/components/ui/use-toast"

interface ReportSchedulerProps {
  templateId: string
  templateName: string
  onSaved: () => void
  onCancel: () => void
}

export function ReportScheduler({ templateId, templateName, onSaved, onCancel }: ReportSchedulerProps) {
  const { scheduleReport, loading } = useReports()
  const [formData, setFormData] = useState({
    name: `${templateName} - Agendado`,
    frequency: ReportFrequency.MONTHLY as ReportFrequency,
    recipients: [""],
    isActive: true,
  })

const handleChange = (field: string, value: any) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleRecipientChange = (index: number, value: string) => {
    const newRecipients = [...formData.recipients]
    newRecipients[index] = value
    handleChange("recipients", newRecipients)
  }

const addRecipient = () => {
    handleChange("recipients", [...formData.recipients, ""])
  }

const removeRecipient = (index: number) => {
    const newRecipients = [...formData.recipients]
    newRecipients.splice(index, 1)
    handleChange("recipients", newRecipients)
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

// Validar formulário
    if (!formData.name) {
      toast({
        title: "Erro",
        description: "O nome do agendamento é obrigatório",
        variant: "destructive",
      })
      return
    }

// Validar emails
    const validRecipients = formData.recipients.filter((email) => email.trim() !== "")
    if (validRecipients.length === 0) {
      toast({
        title: "Erro",
        description: "Adicione pelo menos um destinatário",
        variant: "destructive",
      })
      return
    }

// Validar formato de email
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    for (const email of validRecipients) {
      if (!emailRegex.test(email)) {
        toast({
          title: "Erro",
          description: `O email "${email}" não é válido`,
          variant: "destructive",
        })
        return
      }
    }

try {
      await scheduleReport({
        templateId,
        name: formData.name,
        frequency: formData.frequency,
        recipients: validRecipients,
        isActive: formData.isActive,
        createdBy: "current-user", // Isso seria substituído pelo usuário atual
      })

toast({
        title: "Sucesso",
        description: "Relatório agendado com sucesso",
      })

onSaved()
    } catch (error) {
      toast({
        title: "Erro",
        description: error instanceof Error ? error.message : "Ocorreu um erro ao agendar o relatório",
        variant: "destructive",
      })
    }
  }

return (
    <Card>
      <CardHeader>
        <CardTitle>Agendar Relatório</CardTitle>
        <CardDescription>Configure o agendamento automático para o relatório "{templateName}"</CardDescription>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="space-y-4">
            <div>
              <Label htmlFor="name">Nome do Agendamento</Label>
              <Input id="name" value={formData.name} onChange={(e) => handleChange("name", e.target.value)} required />
            </div>

<div>
              <Label htmlFor="frequency">Frequência</Label>
              <Select value={formData.frequency} onValueChange={(value) => handleChange("frequency", value)}>
                <SelectTrigger id="frequency">
                  <SelectValue placeholder="Selecione a frequência" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value={ReportFrequency.DAILY}>Diariamente</SelectItem>
                  <SelectItem value={ReportFrequency.WEEKLY}>Semanalmente</SelectItem>
                  <SelectItem value={ReportFrequency.MONTHLY}>Mensalmente</SelectItem>
                  <SelectItem value={ReportFrequency.QUARTERLY}>Trimestralmente</SelectItem>
                </SelectContent>
              </Select>
            </div>

<div>
              <Label>Destinatários</Label>
              <div className="space-y-2">
                {formData.recipients.map((recipient, index) => (
                  <div key={index} className="flex items-center gap-2">
                    <Input
                      type="email"
                      value={recipient}
                      onChange={(e) => handleRecipientChange(index, e.target.value)}
                      placeholder="email@exemplo.com"
                    />
                    <Button
                      type="button"
                      variant="ghost"
                      size="icon"
                      onClick={() => removeRecipient(index)}
                      disabled={formData.recipients.length === 1}
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  </div>
                ))}
                <Button type="button" variant="outline" size="sm" onClick={addRecipient} className="mt-2">
                  <Plus className="h-4 w-4 mr-2" />
                  Adicionar Destinatário
                </Button>
              </div>
            </div>

<div className="flex items-center space-x-2">
              <Checkbox
                id="isActive"
                checked={formData.isActive}
                onCheckedChange={(checked) => handleChange("isActive", checked)}
              />
              <Label htmlFor="isActive" className="cursor-pointer">
                Ativar agendamento imediatamente
              </Label>
            </div>
          </div>
        </form>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={onCancel}>
          Cancelar
        </Button>
        <Button onClick={handleSubmit} disabled={loading.scheduled}>
          {loading.scheduled ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Agendando...
            </>
          ) : (
            "Agendar Relatório"
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-filter.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { Checkbox } from "@/components/ui/checkbox"
import { ReportType, type ReportFilter as ReportFilterType, InstallationStatus, Priority } from "../../types/report"
import { X } from "lucide-react"

interface ReportFilterProps {
  initialFilters?: ReportFilterType
  onChange: (filters: ReportFilterType) => void
  reportType: ReportType
}

export function ReportFilter({ initialFilters = {}, onChange, reportType }: ReportFilterProps) {
  const [filters, setFilters] = useState<ReportFilterType>(initialFilters)
  const [expanded, setExpanded] = useState<string[]>(["date"])

useEffect(() => {
    setFilters(initialFilters)
  }, [initialFilters])

const handleChange = (field: string, value: any) => {
    const newFilters = { ...filters, [field]: value }
    setFilters(newFilters)
    onChange(newFilters)
  }

const handleDateRangeChange = (range: { from?: Date; to?: Date }) => {
    if (range.from && range.to) {
      const newFilters = {
        ...filters,
        dateRange: {
          startDate: range.from,
          endDate: range.to,
        },
      }
      setFilters(newFilters)
      onChange(newFilters)
    } else {
      const { dateRange, ...rest } = filters
      setFilters(rest)
      onChange(rest)
    }
  }

const handleStatusChange = (status: InstallationStatus, checked: boolean) => {
    const currentStatuses = filters.statuses || []
    let newStatuses: InstallationStatus[]

if (checked) {
      newStatuses = [...currentStatuses, status]
    } else {
      newStatuses = currentStatuses.filter((s) => s !== status)
    }

const newFilters = { ...filters, statuses: newStatuses }
    setFilters(newFilters)
    onChange(newFilters)
  }

const handlePriorityChange = (priority: Priority, checked: boolean) => {
    const currentPriorities = filters.priorities || []
    let newPriorities: Priority[]

if (checked) {
      newPriorities = [...currentPriorities, priority]
    } else {
      newPriorities = currentPriorities.filter((p) => p !== priority)
    }

const newFilters = { ...filters, priorities: newPriorities }
    setFilters(newFilters)
    onChange(newFilters)
  }

const handleReset = () => {
    setFilters({})
    onChange({})
  }

return (
    <div className="space-y-4">
      <Accordion type="multiple" value={expanded} onValueChange={setExpanded} className="w-full">
        <AccordionItem value="date">
          <AccordionTrigger>Período</AccordionTrigger>
          <AccordionContent>
            <DateRangePicker
              value={{
                from: filters.dateRange?.startDate,
                to: filters.dateRange?.endDate,
              }}
              onChange={handleDateRangeChange}
            />
          </AccordionContent>
        </AccordionItem>

<AccordionItem value="status">
          <AccordionTrigger>Status</AccordionTrigger>
          <AccordionContent>
            <div className="grid grid-cols-2 gap-2">
              {Object.values(InstallationStatus).map((status) => (
                <div key={status} className="flex items-center space-x-2">
                  <Checkbox
                    id={`status-${status}`}
                    checked={(filters.statuses || []).includes(status)}
                    onCheckedChange={(checked) => handleStatusChange(status, !!checked)}
                  />
                  <Label htmlFor={`status-${status}`} className="cursor-pointer">
                    {status}
                  </Label>
                </div>
              ))}
            </div>
          </AccordionContent>
        </AccordionItem>

<AccordionItem value="priority">
          <AccordionTrigger>Prioridade</AccordionTrigger>
          <AccordionContent>
            <div className="grid grid-cols-2 gap-2">
              {Object.values(Priority).map((priority) => (
                <div key={priority} className="flex items-center space-x-2">
                  <Checkbox
                    id={`priority-${priority}`}
                    checked={(filters.priorities || []).includes(priority)}
                    onCheckedChange={(checked) => handlePriorityChange(priority, !!checked)}
                  />
                  <Label htmlFor={`priority-${priority}`} className="cursor-pointer">
                    {priority}
                  </Label>
                </div>
              ))}
            </div>
          </AccordionContent>
        </AccordionItem>

<AccordionItem value="location">
          <AccordionTrigger>Localização</AccordionTrigger>
          <AccordionContent>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="city">Cidade</Label>
                <Input
                  id="city"
                  value={filters.locations?.city || ""}
                  onChange={(e) =>
                    handleChange("locations", {
                      ...(filters.locations || {}),
                      city: e.target.value,
                    })
                  }
                />
              </div>
              <div>
                <Label htmlFor="state">Estado</Label>
                <Input
                  id="state"
                  value={filters.locations?.state || ""}
                  onChange={(e) =>
                    handleChange("locations", {
                      ...(filters.locations || {}),
                      state: e.target.value,
                    })
                  }
                />
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

<AccordionItem value="systemSize">
          <AccordionTrigger>Tamanho do Sistema</AccordionTrigger>
          <AccordionContent>
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="minSize">Tamanho Mínimo (kWp)</Label>
                <Input
                  id="minSize"
                  type="number"
                  min="0"
                  step="0.1"
                  value={filters.systemSizeRange?.min || ""}
                  onChange={(e) =>
                    handleChange("systemSizeRange", {
                      ...(filters.systemSizeRange || { max: 100 }),
                      min: Number.parseFloat(e.target.value) || 0,
                    })
                  }
                />
              </div>
              <div>
                <Label htmlFor="maxSize">Tamanho Máximo (kWp)</Label>
                <Input
                  id="maxSize"
                  type="number"
                  min="0"
                  step="0.1"
                  value={filters.systemSizeRange?.max || ""}
                  onChange={(e) =>
                    handleChange("systemSizeRange", {
                      ...(filters.systemSizeRange || { min: 0 }),
                      max: Number.parseFloat(e.target.value) || 100,
                    })
                  }
                />
              </div>
            </div>
          </AccordionContent>
        </AccordionItem>

{reportType === ReportType.TEAM_PERFORMANCE && (
          <AccordionItem value="team">
            <AccordionTrigger>Equipes</AccordionTrigger>
            <AccordionContent>
              <Select
                value={(filters.teamIds || [])[0] || ""}
                onValueChange={(value) => handleChange("teamIds", [value])}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Selecione uma equipe" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todas as equipes</SelectItem>
                  <SelectItem value="team-1">Equipe Alpha</SelectItem>
                  <SelectItem value="team-2">Equipe Beta</SelectItem>
                  <SelectItem value="team-3">Equipe Gamma</SelectItem>
                </SelectContent>
              </Select>
            </AccordionContent>
          </AccordionItem>
        )}
      </Accordion>

<div className="flex justify-end">
        <Button variant="outline" size="sm" onClick={handleReset} className="flex items-center">
          <X className="mr-2 h-4 w-4" />
          Limpar Filtros
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/services/phone-analysis-service.ts"
import {
  validateBrazilianPhone,
  formatPhoneNumber,
  getPhoneInfo,
  generatePhoneStats,
  PhoneFormatType,
} from "@/lib/phone-utils"
import { brazilianAreaCodes } from "@/lib/phone-database"
import type { InstallationProject } from "../types/installation-project"
import type { Customer } from "../../sales/types/customer"

export interface PhoneAnalysisResult {
  totalPhones: number
  validPhones: number
  invalidPhones: number
  mobilePhones: number
  landlinePhones: number
  byState: Record<string, number>
  byRegion: Record<string, number>
  byAreaCode: Record<string, number>
  metropolitanPhones: number
  nonMetropolitanPhones: number
  validationErrors: Record<string, number>
}

export interface PhoneDistributionData {
  labels: string[]
  values: number[]
  colors: string[]
}

export class PhoneAnalysisService {
  /**
   * Extrai todos os números de telefone de projetos de instalação
   */
  extractPhonesFromProjects(projects: InstallationProject[]): string[] {
    const phones: string[] = []

projects.forEach((project) => {
      if (project.customerPhone) {
        phones.push(project.customerPhone)
      }

if (project.contactPhone) {
        phones.push(project.contactPhone)
      }

// Adicionar outros telefones relacionados ao projeto, se existirem
      if (project.secondaryContacts) {
        project.secondaryContacts.forEach((contact) => {
          if (contact.phone) {
            phones.push(contact.phone)
          }
        })
      }
    })

return phones
  }

/**
   * Extrai todos os números de telefone de clientes
   */
  extractPhonesFromCustomers(customers: Customer[]): string[] {
    const phones: string[] = []

customers.forEach((customer) => {
      if (customer.phone) {
        phones.push(customer.phone)
      }

if (customer.mobilePhone) {
        phones.push(customer.mobilePhone)
      }

if (customer.workPhone) {
        phones.push(customer.workPhone)
      }

// Adicionar outros telefones relacionados ao cliente, se existirem
      if (customer.additionalContacts) {
        customer.additionalContacts.forEach((contact) => {
          if (contact.phone) {
            phones.push(contact.phone)
          }
        })
      }
    })

return phones
  }

/**
   * Analisa uma lista de números de telefone e gera estatísticas
   */
  analyzePhones(phones: string[]): PhoneAnalysisResult {
    const stats = generatePhoneStats(phones)

return {
      totalPhones: stats.total,
      validPhones: stats.valid,
      invalidPhones: stats.invalid,
      mobilePhones: stats.mobile,
      landlinePhones: stats.landline,
      byState: stats.byState,
      byRegion: stats.byRegion,
      byAreaCode: stats.byAreaCode,
      metropolitanPhones: stats.byMetropolitan.yes,
      nonMetropolitanPhones: stats.byMetropolitan.no,
      validationErrors: stats.validationErrors,
    }
  }

/**
   * Formata um número de telefone para o formato especificado
   */
  formatPhone(phone: string, format: PhoneFormatType = PhoneFormatType.STANDARD): string {
    return formatPhoneNumber(phone, format)
  }

/**
   * Valida um número de telefone brasileiro
   */
  validatePhone(phone: string): boolean {
    return validateBrazilianPhone(phone).isValid
  }

/**
   * Obtém informações detalhadas sobre um número de telefone
   */
  getDetailedPhoneInfo(phone: string): any {
    return getPhoneInfo(phone)
  }

/**
   * Prepara dados para visualização da distribuição de telefones por estado
   */
  getPhoneDistributionByState(analysisResult: PhoneAnalysisResult): PhoneDistributionData {
    const labels: string[] = []
    const values: number[] = []
    const colors: string[] = []

// Cores para cada região
    const regionColors: Record<string, string> = {
      North: "#4CAF50",
      Northeast: "#2196F3",
      "Central-West": "#FFC107",
      Southeast: "#FF5722",
      South: "#9C27B0",
    }

// Ordenar estados por quantidade de telefones (decrescente)
    const sortedStates = Object.entries(analysisResult.byState).sort((a, b) => b[1] - a[1])

sortedStates.forEach(([stateCode, count]) => {
      // Encontrar o primeiro código de área para este estado para obter a região
      const areaCode = brazilianAreaCodes.find((ac) => ac.stateCode === stateCode)

labels.push(stateCode)
      values.push(count)

// Atribuir cor com base na região
      if (areaCode) {
        colors.push(regionColors[areaCode.region] || "#9E9E9E")
      } else {
        colors.push("#9E9E9E")
      }
    })

return { labels, values, colors }
  }

/**
   * Prepara dados para visualização da distribuição de telefones por região
   */
  getPhoneDistributionByRegion(analysisResult: PhoneAnalysisResult): PhoneDistributionData {
    const labels: string[] = []
    const values: number[] = []
    const colors: string[] = ["#4CAF50", "#2196F3", "#FFC107", "#FF5722", "#9C27B0"]

// Ordenar regiões por quantidade de telefones (decrescente)
    const sortedRegions = Object.entries(analysisResult.byRegion).sort((a, b) => b[1] - a[1])

sortedRegions.forEach(([region, count], index) => {
      labels.push(region)
      values.push(count)
    })

return { labels, values, colors: colors.slice(0, labels.length) }
  }

/**
   * Prepara dados para visualização da distribuição de telefones por tipo (móvel/fixo)
   */
  getPhoneDistributionByType(analysisResult: PhoneAnalysisResult): PhoneDistributionData {
    return {
      labels: ["Celular", "Fixo", "Não identificado"],
      values: [
        analysisResult.mobilePhones,
        analysisResult.landlinePhones,
        analysisResult.totalPhones - analysisResult.mobilePhones - analysisResult.landlinePhones,
      ],
      colors: ["#4CAF50", "#2196F3", "#9E9E9E"],
    }
  }

/**
   * Prepara dados para visualização da distribuição de telefones por validade
   */
  getPhoneDistributionByValidity(analysisResult: PhoneAnalysisResult): PhoneDistributionData {
    return {
      labels: ["Válidos", "Inválidos"],
      values: [analysisResult.validPhones, analysisResult.invalidPhones],
      colors: ["#4CAF50", "#F44336"],
    }
  }
}

export const phoneAnalysisService = new PhoneAnalysisService()
[V0_FILE]typescriptreact:file="modules/installation/services/geocoding-service.ts"
import {
  geocodeAddress,
  batchGeocodeAddresses,
  calculateDistance,
  formatDistance,
  type GeocodingResult,
} from "@/lib/geocoding-service"
import type { InstallationProject } from "../types/installation-project"

export interface GeocodingAnalysisResult {
  totalAddresses: number
  geocodedAddresses: number
  failedAddresses: number
  byState: Record<string, number>
  byRegion: Record<string, number>
  distanceStats: {
    totalDistance: number
    averageDistance: number
    maxDistance: number
    minDistance: number
  }
}

export interface GeoPoint {
  id: string
  lat: number
  lng: number
  name: string
  type: "project" | "customer" | "office" | "other"
  address: string
  data?: any
}

export class GeocodingService {
  // Localização da sede da empresa (exemplo)
  private companyHeadquarters = {
    lat: -23.5505,
    lng: -46.6333,
    name: "Sede da Empresa",
    address: "São Paulo, SP",
  }

/**
   * Geocodifica um endereço
   */
  async geocodeAddress(address: string): Promise<GeocodingResult | null> {
    return geocodeAddress(address)
  }

/**
   * Geocodifica múltiplos endereços em lote
   */
  async batchGeocodeAddresses(addresses: string[]): Promise<(GeocodingResult | null)[]> {
    return batchGeocodeAddresses(addresses)
  }

/**
   * Extrai e geocodifica endereços de projetos de instalação
   */
  async geocodeProjects(projects: InstallationProject[]): Promise<GeoPoint[]> {
    const geoPoints: GeoPoint[] = []

// Extrair endereços dos projetos
    const projectAddresses = projects.map((project) => {
      const address = [
        project.installationAddress?.address,
        project.installationAddress?.city,
        project.installationAddress?.state,
        project.installationAddress?.zipCode,
        "Brasil",
      ]
        .filter(Boolean)
        .join(", ")

return {
        id: project.id,
        address,
        project,
      }
    })

// Geocodificar endereços em lote
    const addressStrings = projectAddresses.map((item) => item.address)
    const geocodingResults = await this.batchGeocodeAddresses(addressStrings)

// Processar resultados
    projectAddresses.forEach((item, index) => {
      const result = geocodingResults[index]
      if (result) {
        geoPoints.push({
          id: item.id,
          lat: result.lat,
          lng: result.lng,
          name: item.project.name || `Projeto #${item.project.id}`,
          type: "project",
          address: item.address,
          data: item.project,
        })
      }
    })

return geoPoints
  }

/**
   * Calcula a distância entre dois pontos
   */
  calculateDistance(point1: GeoPoint, point2: GeoPoint): number {
    return calculateDistance(point1.lat, point1.lng, point2.lat, point2.lng)
  }

/**
   * Calcula a distância de um ponto até a sede da empresa
   */
  calculateDistanceToHeadquarters(point: GeoPoint): number {
    return calculateDistance(point.lat, point.lng, this.companyHeadquarters.lat, this.companyHeadquarters.lng)
  }

/**
   * Formata uma distância para exibição
   */
  formatDistance(distance: number): string {
    return formatDistance(distance)
  }

/**
   * Analisa a distribuição geográfica de projetos
   */
  analyzeGeographicDistribution(geoPoints: GeoPoint[]): GeocodingAnalysisResult {
    const result: GeocodingAnalysisResult = {
      totalAddresses: geoPoints.length,
      geocodedAddresses: geoPoints.length,
      failedAddresses: 0,
      byState: {},
      byRegion: {},
      distanceStats: {
        totalDistance: 0,
        averageDistance: 0,
        maxDistance: 0,
        minDistance: Number.POSITIVE_INFINITY,
      },
    }

// Calcular distâncias até a sede
    const distances: number[] = []

geoPoints.forEach((point) => {
      // Extrair estado do endereço
      const addressParts = point.address.split(", ")
      const stateCode = addressParts.find((part) => part.length === 2 && part === part.toUpperCase())

if (stateCode) {
        result.byState[stateCode] = (result.byState[stateCode] || 0) + 1

// Mapear estado para região
        let region = ""
        if (["SP", "RJ", "MG", "ES"].includes(stateCode)) region = "Southeast"
        else if (["RS", "SC", "PR"].includes(stateCode)) region = "South"
        else if (["BA", "SE", "AL", "PE", "PB", "RN", "CE", "PI", "MA"].includes(stateCode)) region = "Northeast"
        else if (["MT", "MS", "GO", "DF"].includes(stateCode)) region = "Central-West"
        else if (["AM", "PA", "AC", "RO", "RR", "AP", "TO"].includes(stateCode)) region = "North"

if (region) {
          result.byRegion[region] = (result.byRegion[region] || 0) + 1
        }
      }

// Calcular distância até a sede
      const distance = this.calculateDistanceToHeadquarters(point)
      distances.push(distance)

result.distanceStats.totalDistance += distance
      result.distanceStats.maxDistance = Math.max(result.distanceStats.maxDistance, distance)
      result.distanceStats.minDistance = Math.min(result.distanceStats.minDistance, distance)
    })

// Calcular média
    if (distances.length > 0) {
      result.distanceStats.averageDistance = result.distanceStats.totalDistance / distances.length
    }

if (result.distanceStats.minDistance === Number.POSITIVE_INFINITY) {
      result.distanceStats.minDistance = 0
    }

return result
  }

/**
   * Gera dados para um mapa de calor
   */
  generateHeatmapData(geoPoints: GeoPoint[]): { lat: number; lng: number; weight: number }[] {
    return geoPoints.map((point) => ({
      lat: point.lat,
      lng: point.lng,
      weight: 1, // Peso padrão, pode ser ajustado com base em critérios específicos
    }))
  }
}

export const geocodingService = new GeocodingService()
[V0_FILE]typescriptreact:file="modules/installation/components/reports/phone-analysis-chart.tsx"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { PhoneDistributionData } from "../../services/phone-analysis-service"

interface PhoneAnalysisChartProps {
  data: PhoneDistributionData
  title: string
  type: "pie" | "bar" | "doughnut"
  height?: number
}

export function PhoneAnalysisChart({ data, title, type, height = 300 }: PhoneAnalysisChartProps) {
  const chartRef = useRef<HTMLCanvasElement>(null)
  const chartInstance = useRef<any>(null)

useEffect(() => {
    if (!chartRef.current) return

const ctx = chartRef.current.getContext("2d")
    if (!ctx) return

// Importar Chart.js dinamicamente
    import("chart.js").then((ChartModule) => {
      const { Chart, registerables } = ChartModule
      Chart.register(...registerables)

// Destruir gráfico anterior se existir
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }

// Criar novo gráfico
      chartInstance.current = new Chart(ctx, {
        type,
        data: {
          labels: data.labels,
          datasets: [
            {
              label: title,
              data: data.values,
              backgroundColor: data.colors,
              borderColor: data.colors.map(() => "#ffffff"),
              borderWidth: 1,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: "right",
              labels: {
                boxWidth: 15,
                padding: 15,
              },
            },
            tooltip: {
              callbacks: {
                label: (context) => {
                  const value = context.raw as number
                  const total = data.values.reduce((a, b) => a + b, 0)
                  const percentage = ((value / total) * 100).toFixed(1)
                  return `${context.label}: ${value} (${percentage}%)`
                },
              },
            },
          },
        },
      })
    })

return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }
    }
  }, [data, title, type])

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div style={{ height: `${height}px` }}>
          <canvas ref={chartRef} />
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/phone-analysis-report.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { PhoneAnalysisChart } from "./phone-analysis-chart"
import { phoneAnalysisService } from "../../services/phone-analysis-service"
import type { PhoneAnalysisResult } from "../../services/phone-analysis-service"
import { Loader2, Download, Phone, MapPin } from "lucide-react"

interface PhoneAnalysisReportProps {
  phones: string[]
  title?: string
  description?: string
}

export function PhoneAnalysisReport({ phones, title = "Análise de Telefones", description }: PhoneAnalysisReportProps) {
  const [analysisResult, setAnalysisResult] = useState<PhoneAnalysisResult | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("overview")

useEffect(() => {
    if (phones.length > 0) {
      const result = phoneAnalysisService.analyzePhones(phones)
      setAnalysisResult(result)
    }
    setLoading(false)
  }, [phones])

const handleExportCSV = () => {
    if (!analysisResult) return

// Criar dados CSV
    const rows = [
      ["Telefone", "Válido", "Tipo", "DDD", "Estado", "Região"],
      ...phones.map((phone) => {
        const info = phoneAnalysisService.getDetailedPhoneInfo(phone)
        return [
          phone,
          info.isValid ? "Sim" : "Não",
          info.isMobile ? "Celular" : "Fixo",
          info.areaCode || "",
          info.stateCode || "",
          info.region || "",
        ]
      }),
    ]

const csvContent = rows.map((row) => row.join(",")).join("\n")
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)

const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", "analise_telefones.csv")
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

if (loading) {
    return (
      <Card>
        <CardContent className="flex justify-center items-center py-8">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </CardContent>
      </Card>
    )
  }

if (!analysisResult) {
    return (
      <Card>
        <CardContent className="py-8">
          <p className="text-center text-muted-foreground">Nenhum dado de telefone disponível para análise</p>
        </CardContent>
      </Card>
    )
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>{title}</CardTitle>
            {description && <CardDescription>{description}</CardDescription>}
          </div>
          <Button variant="outline" size="sm" onClick={handleExportCSV}>
            <Download className="mr-2 h-4 w-4" />
            Exportar CSV
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="overview">Visão Geral</TabsTrigger>
            <TabsTrigger value="distribution">Distribuição</TabsTrigger>
            <TabsTrigger value="details">Detalhes</TabsTrigger>
          </TabsList>

<TabsContent value="overview">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{analysisResult.totalPhones}</div>
                  <p className="text-muted-foreground">Total de Telefones</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{analysisResult.validPhones}</div>
                  <p className="text-muted-foreground">Telefones Válidos</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{analysisResult.mobilePhones}</div>
                  <p className="text-muted-foreground">Telefones Celulares</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{analysisResult.landlinePhones}</div>
                  <p className="text-muted-foreground">Telefones Fixos</p>
                </CardContent>
              </Card>
            </div>

<TabsContent value="details">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Telefone</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead>Tipo</TableHead>
                    <TableHead>DDD</TableHead>
                    <TableHead>Estado</TableHead>
                    <TableHead>Região</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {phones.slice(0, 50).map((phone, index) => {
                    const info = phoneAnalysisService.getDetailedPhoneInfo(phone)
                    return (
                      <TableRow key={index}>
                        <TableCell className="font-medium">
                          <div className="flex items-center">
                            <Phone className="h-4 w-4 mr-2 text-muted-foreground" />
                            {phoneAnalysisService.formatPhone(phone)}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant={info.isValid ? "default" : "destructive"}>
                            {info.isValid ? "Válido" : "Inválido"}
                          </Badge>
                        </TableCell>
                        <TableCell>
                          {info.isMobile === true ? "Celular" : info.isMobile === false ? "Fixo" : "Desconhecido"}
                        </TableCell>
                        <TableCell>{info.areaCode || "-"}</TableCell>
                        <TableCell>
                          {info.stateCode ? (
                            <div className="flex items-center">
                              <MapPin className="h-4 w-4 mr-1 text-muted-foreground" />
                              {info.stateCode}
                            </div>
                          ) : (
                            "-"
                          )}
                        </TableCell>
                        <TableCell>{info.region || "-"}</TableCell>
                      </TableRow>
                    )
                  })}
                  {phones.length > 50 && (
                    <TableRow>
                      <TableCell colSpan={6} className="text-center text-muted-foreground">
                        Mostrando 50 de {phones.length} telefones. Exporte para CSV para ver todos.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/geo-analysis-report.tsx"
"use client"

import { useState, useEffect } from "react"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { GeoDistributionMap } from "./geo-distribution-map"
import { PhoneAnalysisChart } from "./phone-analysis-chart"
import { geocodingService } from "../../services/geocoding-service"
import type { GeoPoint, GeocodingAnalysisResult } from "../../services/geocoding-service"
import { Loader2, Download, MapPin, Navigation } from "lucide-react"

interface GeoAnalysisReportProps {
  points: GeoPoint[]
  title?: string
  description?: string
}

export function GeoAnalysisReport({ points, title = "Análise Geográfica", description }: GeoAnalysisReportProps) {
  const [analysisResult, setAnalysisResult] = useState<GeocodingAnalysisResult | null>(null)
  const [loading, setLoading] = useState(true)
  const [activeTab, setActiveTab] = useState("map")

useEffect(() => {
    if (points.length > 0) {
      const result = geocodingService.analyzeGeographicDistribution(points)
      setAnalysisResult(result)
    }
    setLoading(false)
  }, [points])

const handleExportCSV = () => {
    if (!points.length) return

// Criar dados CSV
    const rows = [
      ["Nome", "Tipo", "Endereço", "Latitude", "Longitude", "Distância da Sede (km)"],
      ...points.map((point) => {
        const distance = geocodingService.calculateDistanceToHeadquarters(point)
        return [point.name, point.type, point.address, point.lat.toString(), point.lng.toString(), distance.toFixed(2)]
      }),
    ]

const csvContent = rows.map((row) => row.join(",")).join("\n")
    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
    const url = URL.createObjectURL(blob)

const link = document.createElement("a")
    link.setAttribute("href", url)
    link.setAttribute("download", "analise_geografica.csv")
    link.style.visibility = "hidden"
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  }

if (!analysisResult || points.length === 0) {
    return (
      <Card>
        <CardContent className="py-8">
          <p className="text-center text-muted-foreground">Nenhum dado geográfico disponível para análise</p>
        </CardContent>
      </Card>
    )
  }

// Preparar dados para gráficos
  const stateDistribution = {
    labels: Object.keys(analysisResult.byState),
    values: Object.values(analysisResult.byState),
    colors: Object.keys(analysisResult.byState).map(
      () =>
        `#${Math.floor(Math.random() * 16777215)
          .toString(16)
          .padStart(6, "0")}`,
    ),
  }

const regionDistribution = {
    labels: Object.keys(analysisResult.byRegion),
    values: Object.values(analysisResult.byRegion),
    colors: [
      "#4CAF50", // North
      "#2196F3", // Northeast
      "#FFC107", // Central-West
      "#FF5722", // Southeast
      "#9C27B0", // South
    ].slice(0, Object.keys(analysisResult.byRegion).length),
  }

return (
    <Card>
      <CardHeader>
        <div className="flex justify-between items-start">
          <div>
            <CardTitle>{title}</CardTitle>
            {description && <CardDescription>{description}</CardDescription>}
          </div>
          <Button variant="outline" size="sm" onClick={handleExportCSV}>
            <Download className="mr-2 h-4 w-4" />
            Exportar CSV
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="mb-4">
            <TabsTrigger value="map">Mapa</TabsTrigger>
            <TabsTrigger value="heatmap">Mapa de Calor</TabsTrigger>
            <TabsTrigger value="stats">Estatísticas</TabsTrigger>
            <TabsTrigger value="details">Detalhes</TabsTrigger>
          </TabsList>

<TabsContent value="stats">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{analysisResult.totalAddresses}</div>
                  <p className="text-muted-foreground">Total de Localizações</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">
                    {geocodingService.formatDistance(analysisResult.distanceStats.averageDistance)}
                  </div>
                  <p className="text-muted-foreground">Distância Média da Sede</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">
                    {geocodingService.formatDistance(analysisResult.distanceStats.maxDistance)}
                  </div>
                  <p className="text-muted-foreground">Distância Máxima</p>
                </CardContent>
              </Card>
              <Card>
                <CardContent className="pt-6">
                  <div className="text-2xl font-bold">{Object.keys(analysisResult.byState).length}</div>
                  <p className="text-muted-foreground">Estados Atendidos</p>
                </CardContent>
              </Card>
            </div>

<TabsContent value="details">
            <div className="rounded-md border">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Nome</TableHead>
                    <TableHead>Tipo</TableHead>
                    <TableHead>Endereço</TableHead>
                    <TableHead>Distância da Sede</TableHead>
                    <TableHead>Coordenadas</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {points.slice(0, 50).map((point, index) => {
                    const distance = geocodingService.calculateDistanceToHeadquarters(point)
                    return (
                      <TableRow key={index}>
                        <TableCell className="font-medium">
                          <div className="flex items-center">
                            <MapPin className="h-4 w-4 mr-2 text-muted-foreground" />
                            {point.name}
                          </div>
                        </TableCell>
                        <TableCell>
                          <Badge variant="outline">
                            {point.type === "project"
                              ? "Projeto"
                              : point.type === "customer"
                                ? "Cliente"
                                : point.type === "office"
                                  ? "Escritório"
                                  : "Outro"}
                          </Badge>
                        </TableCell>
                        <TableCell>{point.address}</TableCell>
                        <TableCell>
                          <div className="flex items-center">
                            <Navigation className="h-4 w-4 mr-1 text-muted-foreground" />
                            {geocodingService.formatDistance(distance)}
                          </div>
                        </TableCell>
                        <TableCell>
                          <span className="text-xs text-muted-foreground">
                            {point.lat.toFixed(6)}, {point.lng.toFixed(6)}
                          </span>
                        </TableCell>
                      </TableRow>
                    )
                  })}
                  {points.length > 50 && (
                    <TableRow>
                      <TableCell colSpan={5} className="text-center text-muted-foreground">
                        Mostrando 50 de {points.length} localizações. Exporte para CSV para ver todos.
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/components/reports/report-type-selector.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { ReportType } from "../../types/report"
import {
  FileText,
  BarChart2,
  Users,
  PenToolIcon as Tool,
  DollarSign,
  ClipboardCheck,
  Phone,
  MapPin,
} from "lucide-react"

interface ReportTypeSelectorProps {
  value: ReportType
  onChange: (type: ReportType) => void
}

export function ReportTypeSelector({ value, onChange }: ReportTypeSelectorProps) {
  const reportTypes = [
    {
      type: ReportType.PROJECT_SUMMARY,
      label: "Resumo de Projetos",
      icon: <FileText className="h-4 w-4 mr-2" />,
      description: "Visão geral de todos os projetos de instalação",
    },
    {
      type: ReportType.INSTALLATION_DETAILS,
      label: "Detalhes de Instalação",
      icon: <Tool className="h-4 w-4 mr-2" />,
      description: "Informações detalhadas sobre instalações específicas",
    },
    {
      type: ReportType.PROGRESS_REPORT,
      label: "Relatório de Progresso",
      icon: <BarChart2 className="h-4 w-4 mr-2" />,
      description: "Acompanhamento do progresso das instalações",
    },
    {
      type: ReportType.TEAM_PERFORMANCE,
      label: "Desempenho de Equipes",
      icon: <Users className="h-4 w-4 mr-2" />,
      description: "Análise de desempenho das equipes de instalação",
    },
    {
      type: ReportType.EQUIPMENT_USAGE,
      label: "Uso de Equipamentos",
      icon: <Tool className="h-4 w-4 mr-2" />,
      description: "Relatório de uso e alocação de equipamentos",
    },
    {
      type: ReportType.FINANCIAL_SUMMARY,
      label: "Resumo Financeiro",
      icon: <DollarSign className="h-4 w-4 mr-2" />,
      description: "Resumo financeiro dos projetos de instalação",
    },
    {
      type: ReportType.INSPECTION_RESULTS,
      label: "Resultados de Inspeção",
      icon: <ClipboardCheck className="h-4 w-4 mr-2" />,
      description: "Resultados das inspeções realizadas",
    },
    {
      type: ReportType.PHONE_ANALYSIS,
      label: "Análise de Telefones",
      icon: <Phone className="h-4 w-4 mr-2" />,
      description: "Análise detalhada dos números de telefone",
    },
    {
      type: ReportType.GEO_DISTRIBUTION,
      label: "Distribuição Geográfica",
      icon: <MapPin className="h-4 w-4 mr-2" />,
      description: "Análise da distribuição geográfica dos projetos",
    },
    {
      type: ReportType.CUSTOM,
      label: "Personalizado",
      icon: <FileText className="h-4 w-4 mr-2" />,
      description: "Relatório personalizado com campos selecionáveis",
    },
  ]

return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-2">
      {reportTypes.map((reportType) => (
        <Button
          key={reportType.type}
          type="button"
          variant={value === reportType.type ? "default" : "outline"}
          className={`justify-start h-auto py-3 px-4 ${value === reportType.type ? "border-primary" : ""}`}
          onClick={() => onChange(reportType.type)}
        >
          <div className="flex flex-col items-start text-left">
            <div className="flex items-center">
              {reportType.icon}
              <span>{reportType.label}</span>
            </div>
            <span className="text-xs text-muted-foreground mt-1">{reportType.description}</span>
          </div>
        </Button>
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/installation/types/report.ts"
import type { InstallationStatus, Priority } from "./installation-project"

export enum ReportType {
  PROJECT_SUMMARY = "project_summary",
  INSTALLATION_DETAILS = "installation_details",
  PROGRESS_REPORT = "progress_report",
  TEAM_PERFORMANCE = "team_performance",
  EQUIPMENT_USAGE = "equipment_usage",
  FINANCIAL_SUMMARY = "financial_summary",
  INSPECTION_RESULTS = "inspection_results",
  PHONE_ANALYSIS = "phone_analysis",
  GEO_DISTRIBUTION = "geo_distribution",
  CUSTOM = "custom",
}

export enum ReportFormat {
  PDF = "pdf",
  EXCEL = "excel",
  CSV = "csv",
  HTML = "html",
}

export enum ReportFrequency {
  ONCE = "once",
  DAILY = "daily",
  WEEKLY = "weekly",
  MONTHLY = "monthly",
  QUARTERLY = "quarterly",
}

export interface ReportFilter {
  dateRange?: {
    startDate: Date
    endDate: Date
  }
  projectIds?: string[]
  teamIds?: string[]
  statuses?: InstallationStatus[]
  priorities?: Priority[]
  locations?: {
    city?: string
    state?: string
  }
  systemSizeRange?: {
    min: number
    max: number
  }
  customFields?: Record<string, any>
}

export interface ReportTemplate {
  id: string
  name: string
  description?: string
  type: ReportType
  format: ReportFormat
  filters: ReportFilter
  columns: string[]
  groupBy?: string
  sortBy?: string
  sortDirection?: "asc" | "desc"
  createdAt: Date
  updatedAt: Date
  createdBy: string
  isDefault?: boolean
}

export interface ScheduledReport {
  id: string
  templateId: string
  name: string
  frequency: ReportFrequency
  nextRunDate: Date
  lastRunDate?: Date
  recipients: string[]
  isActive: boolean
  createdAt: Date
  updatedAt: Date
  createdBy: string
}

export interface ReportResult {
  id: string
  templateId: string
  scheduledReportId?: string
  name: string
  format: ReportFormat
  generatedAt: Date
  generatedBy: string
  fileUrl: string
  fileSize: number
  expiresAt?: Date
  metadata?: Record<string, any>
}

export interface ReportColumn {
  id: string
  label: string
  field: string
  type: "text" | "number" | "date" | "boolean" | "currency" | "percentage" | "custom"
  formatter?: string
  width?: number
  sortable?: boolean
  filterable?: boolean
  visible?: boolean
}

export interface ReportSection {
  id: string
  title: string
  type: "table" | "chart" | "summary" | "text"
  data?: any
  columns?: ReportColumn[]
  chartType?: "bar" | "line" | "pie" | "area"
  chartOptions?: Record<string, any>
}

export interface ReportData {
  title: string
  description?: string
  generatedAt: Date
  generatedBy: string
  filters: ReportFilter
  sections: ReportSection[]
  summary?: Record<string, any>
  metadata?: Record<string, any>
}
[V0_FILE]typescriptreact:file="app/installation/reports/phone-analysis/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { PhoneAnalysisReport } from "@/modules/installation/components/reports/phone-analysis-report"
import { Card, CardContent } from "@/components/ui/card"
import { Loader2 } from "lucide-react"

export default function PhoneAnalysisPage() {
  const [phones, setPhones] = useState<string[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchData = async () => {
      try {
        // Em um cenário real, buscaríamos os dados da API
        // Aqui estamos simulando alguns números de telefone para demonstração
        const samplePhones = [
          "(11) 98765-4321",
          "(21) 99876-5432",
          "(31) 3456-7890",
          "(41) 97654-3210",
          "(51) 3210-9876",
          "(61) 98901-2345",
          "(71) 3567-8901",
          "(81) 99012-3456",
          "(91) 3789-0123",
          "(47) 98234-5678",
          "(85) 3456-7890",
          "(27) 99876-5432",
          "(92) 3210-9876",
          "(84) 98765-4321",
          "(48) 3456-7890",
          "(62) 99012-3456",
          "(65) 3789-0123",
          "(82) 98234-5678",
          "(13) 3456-7890",
          "(19) 99876-5432",
        ]

// Simular um atraso de carregamento
        setTimeout(() => {
          setPhones(samplePhones)
          setLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Erro ao carregar dados:", error)
        setLoading(false)
      }
    }

fetchData()
  }, [])

if (loading) {
    return (
      <Card>
        <CardContent className="flex justify-center items-center py-16">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </CardContent>
      </Card>
    )
  }

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Análise de Números de Telefone</h1>
      <PhoneAnalysisReport
        phones={phones}
        title="Análise de Telefones de Clientes e Projetos"
        description="Análise detalhada dos números de telefone associados a clientes e projetos de instalação"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/installation/reports/geo-analysis/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { GeoAnalysisReport } from "@/modules/installation/components/reports/geo-analysis-report"
import type { GeoPoint } from "@/modules/installation/services/geocoding-service"
import { Card, CardContent } from "@/components/ui/card"
import { Loader2 } from "lucide-react"

export default function GeoAnalysisPage() {
  const [points, setPoints] = useState<GeoPoint[]>([])
  const [loading, setLoading] = useState(true)

useEffect(() => {
    const fetchData = async () => {
      try {
        // Em um cenário real, buscaríamos os dados da API
        // Aqui estamos simulando alguns pontos geográficos para demonstração
        const samplePoints: GeoPoint[] = [
          {
            id: "1",
            lat: -23.5505,
            lng: -46.6333,
            name: "Projeto Solar São Paulo",
            type: "project",
            address: "São Paulo, SP, Brasil",
          },
          {
            id: "2",
            lat: -22.9068,
            lng: -43.1729,
            name: "Instalação Rio de Janeiro",
            type: "project",
            address: "Rio de Janeiro, RJ, Brasil",
          },
          {
            id: "3",
            lat: -19.9167,
            lng: -43.9345,
            name: "Cliente Belo Horizonte",
            type: "customer",
            address: "Belo Horizonte, MG, Brasil",
          },
          {
            id: "4",
            lat: -30.0346,
            lng: -51.2177,
            name: "Projeto Porto Alegre",
            type: "project",
            address: "Porto Alegre, RS, Brasil",
          },
          {
            id: "5",
            lat: -25.4284,
            lng: -49.2733,
            name: "Escritório Curitiba",
            type: "office",
            address: "Curitiba, PR, Brasil",
          },
          {
            id: "6",
            lat: -15.7801,
            lng: -47.9292,
            name: "Instalação Brasília",
            type: "project",
            address: "Brasília, DF, Brasil",
          },
          {
            id: "7",
            lat: -12.9714,
            lng: -38.5014,
            name: "Cliente Salvador",
            type: "customer",
            address: "Salvador, BA, Brasil",
          },
          {
            id: "8",
            lat: -8.0476,
            lng: -34.877,
            name: "Projeto Recife",
            type: "project",
            address: "Recife, PE, Brasil",
          },
          {
            id: "9",
            lat: -3.7319,
            lng: -38.5267,
            name: "Instalação Fortaleza",
            type: "project",
            address: "Fortaleza, CE, Brasil",
          },
          {
            id: "10",
            lat: -27.5969,
            lng: -48.5495,
            name: "Cliente Florianópolis",
            type: "customer",
            address: "Florianópolis, SC, Brasil",
          },
          {
            id: "11",
            lat: -20.4428,
            lng: -54.6464,
            name: "Projeto Campo Grande",
            type: "project",
            address: "Campo Grande, MS, Brasil",
          },
          {
            id: "12",
            lat: -16.6799,
            lng: -49.255,
            name: "Instalação Goiânia",
            type: "project",
            address: "Goiânia, GO, Brasil",
          },
          {
            id: "13",
            lat: -2.5307,
            lng: -44.3068,
            name: "Cliente São Luís",
            type: "customer",
            address: "São Luís, MA, Brasil",
          },
          {
            id: "14",
            lat: -9.9747,
            lng: -67.8099,
            name: "Projeto Rio Branco",
            type: "project",
            address: "Rio Branco, AC, Brasil",
          },
          {
            id: "15",
            lat: -3.119,
            lng: -60.0217,
            name: "Instalação Manaus",
            type: "project",
            address: "Manaus, AM, Brasil",
          },
        ]

// Simular um atraso de carregamento
        setTimeout(() => {
          setPoints(samplePoints)
          setLoading(false)
        }, 1000)
      } catch (error) {
        console.error("Erro ao carregar dados:", error)
        setLoading(false)
      }
    }

fetchData()
  }, [])

return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Análise Geográfica</h1>
      <GeoAnalysisReport
        points={points}
        title="Distribuição Geográfica de Projetos e Clientes"
        description="Análise da distribuição geográfica dos projetos de instalação e clientes"
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-filter.tsx" isQuickEdit="true"
"use client"

import type React from "react"

// Modifique a interface LeadFilterProps para tornar onFilter opcional e adicione um valor padrão
interface LeadFilterProps {
  onFilter?: (filters: any) => void
}

export function LeadFilter({ onFilter = () => {} }: LeadFilterProps) {
  const [filters, setFilters] = useState({
    search: "",
    status: "",
    source: "",
    dateRange: {
      from: undefined,
      to: undefined,
    },
  })

const handleChange = (field: string, value: any) => {
    setFilters((prev) => ({
      ...prev,
      [field]: value,
    }))
  }

const handleDateRangeChange = (range: { from?: Date; to?: Date }) => {
    setFilters((prev) => ({
      ...prev,
      dateRange: range,
    }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    if (typeof onFilter === "function") {
      onFilter(filters)
    }
  }

const handleReset = () => {
    setFilters({
      search: "",
      status: "",
      source: "",
      dateRange: {
        from: undefined,
        to: undefined,
      },
    })
    if (typeof onFilter === "function") {
      onFilter({})
    }
  }

return (
    <form onSubmit={handleSubmit} className="space-y-4 p-4 border rounded-lg bg-background">
      <div className="flex flex-col md:flex-row gap-4">
        <div className="flex-1">
          <Label htmlFor="search">Buscar</Label>
          <div className="relative">
            <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
            <Input
              id="search"
              placeholder="Nome, email ou telefone"
              className="pl-8"
              value={filters.search}
              onChange={(e) => handleChange("search", e.target.value)}
            />
          </div>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="status">Status</Label>
          <Select value={filters.status} onValueChange={(value) => handleChange("status", value)}>
            <SelectTrigger id="status">
              <SelectValue placeholder="Todos" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="new">Novo</SelectItem>
              <SelectItem value="contacted">Contatado</SelectItem>
              <SelectItem value="qualified">Qualificado</SelectItem>
              <SelectItem value="unqualified">Não Qualificado</SelectItem>
              <SelectItem value="converted">Convertido</SelectItem>
            </SelectContent>
          </Select>
        </div>

<div className="w-full md:w-[180px]">
          <Label htmlFor="source">Origem</Label>
          <Select value={filters.source} onValueChange={(value) => handleChange("source", value)}>
            <SelectTrigger id="source">
              <SelectValue placeholder="Todas" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Todas</SelectItem>
              <SelectItem value="website">Website</SelectItem>
              <SelectItem value="referral">Indicação</SelectItem>
              <SelectItem value="social">Redes Sociais</SelectItem>
              <SelectItem value="event">Evento</SelectItem>
              <SelectItem value="other">Outros</SelectItem>
            </SelectContent>
          </Select>
        </div>
      </div>

<div className="flex flex-col md:flex-row gap-4 items-end">
        <div className="flex-1">
          <Label>Período</Label>
          <DateRangePicker value={filters.dateRange} onChange={handleDateRangeChange} />
        </div>

<div className="flex gap-2">
          <Button type="submit" variant="default">
            <Filter className="mr-2 h-4 w-4" />
            Filtrar
          </Button>
          <Button type="button" variant="outline" onClick={handleReset}>
            <X className="mr-2 h-4 w-4" />
            Limpar
          </Button>
        </div>
      </div>
    </form>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-form-modal.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { LeadForm } from "./lead-form"
import { PlusCircle } from "lucide-react"

interface LeadFormModalProps {
  onSuccess?: () => void
  buttonLabel?: string
  buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
  buttonSize?: "default" | "sm" | "lg" | "icon"
}

export function LeadFormModal({
  onSuccess,
  buttonLabel = "Adicionar Lead",
  buttonVariant = "default",
  buttonSize = "default",
}: LeadFormModalProps) {
  const [open, setOpen] = useState(false)

const handleSuccess = () => {
    setOpen(false)
    if (onSuccess) {
      onSuccess()
    }
  }

const handleCancel = () => {
    setOpen(false)
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant={buttonVariant} size={buttonSize}>
          <PlusCircle className="mr-2 h-4 w-4" />
          {buttonLabel}
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Adicionar Novo Lead</DialogTitle>
          <DialogDescription>Preencha o formulário abaixo para adicionar um novo lead ao sistema.</DialogDescription>
        </DialogHeader>
        <LeadForm onSuccess={handleSuccess} onCancel={handleCancel} />
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/new/page.tsx"
import { LeadForm } from "@/modules/sales/components/leads/lead-form"
import { SalesProvider } from "@/modules/sales/contexts/sales-context"

export default function NewLeadPage() {
  return (
    <SalesProvider>
      <div className="container mx-auto py-6">
        <h1 className="text-3xl font-bold mb-6">Adicionar Novo Lead</h1>
        <LeadForm />
      </div>
    </SalesProvider>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/types/pagination.ts"
export interface PaginationParams {
  page: number
  pageSize: number
}

export interface PaginationInfo extends PaginationParams {
  total: number
  totalPages: number
  hasNext: boolean
  hasPrevious: boolean
}

export interface PaginatedResult<T> {
  data: T[]
  pagination: PaginationInfo
}
[V0_FILE]typescriptreact:file="modules/sales/components/common/pagination.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"

interface PaginationProps {
  currentPage: number
  totalPages: number
  onPageChange: (page: number) => void
  totalItems?: number
  pageSize?: number
  showItemCount?: boolean
}

export function Pagination({
  currentPage,
  totalPages,
  onPageChange,
  totalItems,
  pageSize,
  showItemCount = false,
}: PaginationProps) {
  // Não renderizar paginação se não houver páginas
  if (totalPages <= 1) {
    return null
  }

// Calcular quais números de página mostrar
  const getPageNumbers = () => {
    const pageNumbers = []
    const maxPagesToShow = 5 // Número máximo de páginas a mostrar

if (totalPages <= maxPagesToShow) {
      // Se o total de páginas for menor que o máximo, mostrar todas
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i)
      }
    } else {
      // Sempre mostrar a primeira página
      pageNumbers.push(1)

// Calcular o intervalo de páginas a mostrar
      let startPage = Math.max(2, currentPage - 1)
      let endPage = Math.min(totalPages - 1, currentPage + 1)

// Ajustar se estamos perto do início
      if (currentPage <= 3) {
        endPage = 4
      }

// Ajustar se estamos perto do fim
      if (currentPage >= totalPages - 2) {
        startPage = totalPages - 3
      }

// Adicionar elipses se necessário
      if (startPage > 2) {
        pageNumbers.push("ellipsis-start")
      }

// Adicionar páginas do intervalo
      for (let i = startPage; i <= endPage; i++) {
        pageNumbers.push(i)
      }

// Adicionar elipses se necessário
      if (endPage < totalPages - 1) {
        pageNumbers.push("ellipsis-end")
      }

// Sempre mostrar a última página
      pageNumbers.push(totalPages)
    }

return pageNumbers
  }

const pageNumbers = getPageNumbers()

// Calcular informações de contagem de itens
  const startItem = totalItems && pageSize ? (currentPage - 1) * pageSize + 1 : null
  const endItem = totalItems && pageSize ? Math.min(currentPage * pageSize, totalItems) : null

return (
    <div className="flex flex-col items-center space-y-2 sm:flex-row sm:space-y-0 sm:space-x-4">
      {showItemCount && startItem && endItem && totalItems && (
        <div className="text-sm text-gray-500">
          Mostrando {startItem}-{endItem} de {totalItems} itens
        </div>
      )}

<div className="flex items-center space-x-1">
        <Button
          variant="outline"
          size="icon"
          onClick={() => onPageChange(1)}
          disabled={currentPage === 1}
          aria-label="Primeira página"
        >
          <ChevronsLeft className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          onClick={() => onPageChange(currentPage - 1)}
          disabled={currentPage === 1}
          aria-label="Página anterior"
        >
          <ChevronLeft className="h-4 w-4" />
        </Button>

<div className="flex items-center space-x-1">
          {pageNumbers.map((page, index) => {
            if (page === "ellipsis-start" || page === "ellipsis-end") {
              return (
                <div key={`ellipsis-${index}`} className="px-2 py-1 text-gray-500">
                  ...
                </div>
              )
            }

return (
              <Button
                key={`page-${page}`}
                variant={currentPage === page ? "default" : "outline"}
                size="icon"
                onClick={() => onPageChange(page as number)}
                aria-label={`Página ${page}`}
                aria-current={currentPage === page ? "page" : undefined}
              >
                {page}
              </Button>
            )
          })}
        </div>

<Button
          variant="outline"
          size="icon"
          onClick={() => onPageChange(currentPage + 1)}
          disabled={currentPage === totalPages}
          aria-label="Próxima página"
        >
          <ChevronRight className="h-4 w-4" />
        </Button>
        <Button
          variant="outline"
          size="icon"
          onClick={() => onPageChange(totalPages)}
          disabled={currentPage === totalPages}
          aria-label="Última página"
        >
          <ChevronsRight className="h-4 w-4" />
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/services/lead-regional-analysis-service.ts"
import { getPhoneInfo, extractAreaCode, getStateFromAreaCode } from "@/lib/phone-utils"
import { brazilianAreaCodes } from "@/lib/phone-database"
import type { Lead } from "../types/lead"

export interface RegionalDistribution {
  byState: Record<string, number>
  byRegion: Record<string, number>
  byAreaCode: Record<string, number>
  validPhones: number
  invalidPhones: number
  totalLeads: number
  metropolitanAreas: number
  interiorAreas: number
  topStates: Array<{ state: string; count: number; percentage: number }>
  topAreaCodes: Array<{ areaCode: string; state: string; count: number; percentage: number }>
}

export interface LeadRegionalFilter {
  status?: string[]
  dateRange?: { start: Date; end: Date }
  source?: string[]
  tags?: string[]
}

export class LeadRegionalAnalysisService {
  /**
   * Analisa a distribuição regional de leads com base nos números de telefone
   */
  analyzeRegionalDistribution(leads: Lead[], filter?: LeadRegionalFilter): RegionalDistribution {
    // Filtra os leads se necessário
    let filteredLeads = [...leads]

if (filter) {
      filteredLeads = this.filterLeads(leads, filter)
    }

// Inicializa contadores
    const byState: Record<string, number> = {}
    const byRegion: Record<string, number> = {}
    const byAreaCode: Record<string, number> = {}
    let validPhones = 0
    let invalidPhones = 0
    let metropolitanAreas = 0
    let interiorAreas = 0

// Processa cada lead
    filteredLeads.forEach((lead) => {
      if (!lead.phone) return

const phoneInfo = getPhoneInfo(lead.phone)

// Conta telefones válidos/inválidos
      if (phoneInfo.isValid) {
        validPhones++
      } else {
        invalidPhones++
      }

// Processa informações regionais se o telefone for válido
      if (phoneInfo.areaCode && phoneInfo.stateCode) {
        // Contagem por estado
        byState[phoneInfo.stateCode] = (byState[phoneInfo.stateCode] || 0) + 1

// Contagem por DDD
        byAreaCode[phoneInfo.areaCode] = (byAreaCode[phoneInfo.areaCode] || 0) + 1

// Busca informações da região
        const areaCodeInfo = brazilianAreaCodes.find((ac) => ac.code === phoneInfo.areaCode)
        if (areaCodeInfo?.region) {
          byRegion[areaCodeInfo.region] = (byRegion[areaCodeInfo.region] || 0) + 1
        }

// Contagem de áreas metropolitanas vs interior
        if (phoneInfo.isMetropolitan) {
          metropolitanAreas++
        } else {
          interiorAreas++
        }
      }
    })

// Calcula os estados com mais leads
    const topStates = Object.entries(byState)
      .map(([state, count]) => ({
        state,
        count,
        percentage: (count / filteredLeads.length) * 100,
      }))
      .sort((a, b) => b.count - a.count)
      .slice(0, 5)

// Calcula os DDDs com mais leads
    const topAreaCodes = Object.entries(byAreaCode)
      .map(([areaCode, count]) => {
        const stateCode = getStateFromAreaCode(areaCode) || "N/A"
        return {
          areaCode,
          state: stateCode,
          count,
          percentage: (count / filteredLeads.length) * 100,
        }
      })
      .sort((a, b) => b.count - a.count)
      .slice(0, 10)

return {
      byState,
      byRegion,
      byAreaCode,
      validPhones,
      invalidPhones,
      totalLeads: filteredLeads.length,
      metropolitanAreas,
      interiorAreas,
      topStates,
      topAreaCodes,
    }
  }

/**
   * Filtra leads com base nos critérios fornecidos
   */
  private filterLeads(leads: Lead[], filter: LeadRegionalFilter): Lead[] {
    return leads.filter((lead) => {
      // Filtro por status
      if (filter.status && filter.status.length > 0 && !filter.status.includes(lead.status)) {
        return false
      }

// Filtro por período
      if (filter.dateRange) {
        if (filter.dateRange.start && lead.createdAt < filter.dateRange.start) {
          return false
        }
        if (filter.dateRange.end) {
          const endDate = new Date(filter.dateRange.end)
          endDate.setHours(23, 59, 59, 999) // Fim do dia
          if (lead.createdAt > endDate) {
            return false
          }
        }
      }

// Filtro por origem
      if (filter.source && filter.source.length > 0 && !filter.source.includes(lead.source)) {
        return false
      }

// Filtro por tags
      if (filter.tags && filter.tags.length > 0) {
        if (!lead.tags || !lead.tags.some((tag) => filter.tags!.includes(tag))) {
          return false
        }
      }

return true
    })
  }

/**
   * Extrai o estado a partir do número de telefone
   */
  getStateFromPhone(phone: string): string | null {
    const areaCode = extractAreaCode(phone)
    return areaCode ? getStateFromAreaCode(areaCode) : null
  }

/**
   * Obtém a lista de todos os estados brasileiros
   */
  getAllBrazilianStates(): string[] {
    const states = new Set<string>()
    brazilianAreaCodes.forEach((code) => {
      states.add(code.stateCode)
    })
    return Array.from(states).sort()
  }

/**
   * Obtém a lista de todas as regiões brasileiras
   */
  getAllBrazilianRegions(): string[] {
    const regions = new Set<string>()
    brazilianAreaCodes.forEach((code) => {
      regions.add(code.region)
    })
    return Array.from(regions).sort()
  }

/**
   * Obtém o nome completo do estado a partir da sigla
   */
  getStateFullName(stateCode: string): string {
    const stateInfo = brazilianAreaCodes.find((code) => code.stateCode === stateCode)
    return stateInfo ? stateInfo.state : stateCode
  }
}

export const leadRegionalAnalysisService = new LeadRegionalAnalysisService()
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/regional-distribution-chart.tsx"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface RegionalDistributionChartProps {
  data: {
    labels: string[]
    values: number[]
    colors?: string[]
  }
  title: string
  type: "pie" | "bar" | "doughnut"
  height?: number
}

export function RegionalDistributionChart({ data, title, type, height = 300 }: RegionalDistributionChartProps) {
  const chartRef = useRef<HTMLCanvasElement>(null)
  const chartInstance = useRef<any>(null)

useEffect(() => {
    if (!chartRef.current) return

const ctx = chartRef.current.getContext("2d")
    if (!ctx) return

// Importar Chart.js dinamicamente
    import("chart.js").then((ChartModule) => {
      const { Chart, registerables } = ChartModule
      Chart.register(...registerables)

// Destruir gráfico anterior se existir
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }

// Criar novo gráfico
      chartInstance.current = new Chart(ctx, {
        type,
        data: {
          labels: data.labels,
          datasets: [
            {
              label: title,
              data: data.values,
              backgroundColor: data.colors || [
                "#4CAF50",
                "#2196F3",
                "#FFC107",
                "#FF5722",
                "#9C27B0",
                "#3F51B5",
                "#E91E63",
                "#009688",
                "#795548",
                "#607D8B",
              ],
              borderColor: "#ffffff",
              borderWidth: 1,
            },
          ],
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: "right",
              labels: {
                boxWidth: 15,
                padding: 15,
              },
            },
            tooltip: {
              callbacks: {
                label: (context) => {
                  const value = context.raw as number
                  const total = data.values.reduce((a, b) => a + b, 0)
                  const percentage = ((value / total) * 100).toFixed(1)
                  return `${context.label}: ${value} (${percentage}%)`
                },
              },
            },
          },
        },
      })
    })

return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy()
      }
    }
  }, [data, title, type])

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div style={{ height: `${height}px` }}>
          <canvas ref={chartRef} />
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/brazil-heatmap.tsx"
"use client"

import { useEffect, useRef } from "react"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface BrazilHeatmapProps {
  data: Record<string, number>
  title: string
  height?: number
}

export function BrazilHeatmap({ data, title, height = 400 }: BrazilHeatmapProps) {
  const mapRef = useRef<HTMLDivElement>(null)
  const mapInstance = useRef<any>(null)

useEffect(() => {
    if (!mapRef.current) return

// Importar as bibliotecas necessárias dinamicamente
    Promise.all([import("leaflet"), import("leaflet.heat")]).then(([L]) => {
      // Configurar o mapa se ainda não estiver inicializado
      if (!mapInstance.current) {
        // Centralizar no Brasil
        mapInstance.current = L.map(mapRef.current).setView([-15.77972, -47.92972], 4)

// Adicionar camada de mapa base
        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
          attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }).addTo(mapInstance.current)
      }

// Limpar camadas existentes
      mapInstance.current.eachLayer((layer: any) => {
        if (layer instanceof L.Marker || layer instanceof L.GeoJSON) {
          mapInstance.current.removeLayer(layer)
        }
      })

// Adicionar fronteiras dos estados brasileiros
      fetch("/brazil-states.geojson")
        .then((response) => response.json())
        .then((statesData) => {
          // Normalizar os dados para uma escala de 0 a 1
          const values = Object.values(data) as number[]
          const maxValue = Math.max(...values)

// Função para obter a cor com base no valor normalizado
          const getColor = (value: number) => {
            const normalized = maxValue > 0 ? value / maxValue : 0
            return normalized > 0.8
              ? "#800026"
              : normalized > 0.6
                ? "#BD0026"
                : normalized > 0.4
                  ? "#E31A1C"
                  : normalized > 0.2
                    ? "#FC4E2A"
                    : normalized > 0.1
                      ? "#FD8D3C"
                      : normalized > 0.05
                        ? "#FEB24C"
                        : normalized > 0
                          ? "#FED976"
                          : "#FFEDA0"
          }

// Adicionar camada GeoJSON com estilo baseado nos dados
          L.geoJSON(statesData, {
            style: (feature) => {
              const stateCode = feature?.properties?.sigla
              const value = stateCode ? data[stateCode] || 0 : 0
              return {
                fillColor: getColor(value),
                weight: 1,
                opacity: 1,
                color: "white",
                fillOpacity: 0.7,
              }
            },
            onEachFeature: (feature, layer) => {
              const stateCode = feature?.properties?.sigla
              const stateName = feature?.properties?.nome
              const value = stateCode ? data[stateCode] || 0 : 0

layer.bindTooltip(`
                <strong>${stateName} (${stateCode})</strong><br>
                Leads: ${value}
              `)
            },
          }).addTo(mapInstance.current)
        })
        .catch((error) => {
          console.error("Erro ao carregar dados dos estados:", error)
        })
    })

return () => {
      if (mapInstance.current) {
        mapInstance.current.remove()
        mapInstance.current = null
      }
    }
  }, [data])

return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <div ref={mapRef} style={{ height: `${height}px` }} />
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/regional-stats.tsx"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import type { RegionalDistribution } from "../../services/lead-regional-analysis-service"

interface RegionalStatsProps {
  data: RegionalDistribution
}

export function RegionalStats({ data }: RegionalStatsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">Total de Leads</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{data.totalLeads}</div>
          <p className="text-xs text-muted-foreground">
            {data.validPhones} com telefones válidos ({((data.validPhones / data.totalLeads) * 100).toFixed(1)}%)
          </p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">Estados Cobertos</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{Object.keys(data.byState).length}</div>
          <p className="text-xs text-muted-foreground">De 27 estados e DF</p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">Regiões Cobertas</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">{Object.keys(data.byRegion).length}</div>
          <p className="text-xs text-muted-foreground">De 5 regiões do Brasil</p>
        </CardContent>
      </Card>

<Card>
        <CardHeader className="pb-2">
          <CardTitle className="text-sm font-medium">Distribuição Geográfica</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="text-2xl font-bold">
            {((data.metropolitanAreas / (data.metropolitanAreas + data.interiorAreas)) * 100).toFixed(1)}%
          </div>
          <p className="text-xs text-muted-foreground">Em áreas metropolitanas</p>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/regional-top-table.tsx"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface RegionalTopTableProps {
  title: string
  data: Array<{
    state?: string
    areaCode?: string
    count: number
    percentage: number
  }>
  type: "states" | "areaCodes"
}

export function RegionalTopTable({ title, data, type }: RegionalTopTableProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">#</TableHead>
              {type === "states" ? (
                <TableHead>Estado</TableHead>
              ) : (
                <>
                  <TableHead>DDD</TableHead>
                  <TableHead>Estado</TableHead>
                </>
              )}
              <TableHead>Leads</TableHead>
              <TableHead className="text-right">%</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {data.map((item, index) => (
              <TableRow key={index}>
                <TableCell className="font-medium">{index + 1}</TableCell>
                {type === "states" ? (
                  <TableCell>{item.state}</TableCell>
                ) : (
                  <>
                    <TableCell>{item.areaCode}</TableCell>
                    <TableCell>{item.state}</TableCell>
                  </>
                )}
                <TableCell>{item.count}</TableCell>
                <TableCell className="text-right">{item.percentage.toFixed(1)}%</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/analytics/regional-analysis-filter.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { LeadStatus } from "../../types/lead"
import type { LeadRegionalFilter } from "../../services/lead-regional-analysis-service"

interface RegionalAnalysisFilterProps {
  onFilter: (filter: LeadRegionalFilter) => void
  sources: string[]
  tags: string[]
}

export function RegionalAnalysisFilter({ onFilter, sources, tags }: RegionalAnalysisFilterProps) {
  const [status, setStatus] = useState<string[]>([])
  const [source, setSource] = useState<string[]>([])
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [dateRange, setDateRange] = useState<{ start: Date; end: Date } | undefined>()

const handleFilter = () => {
    const filter: LeadRegionalFilter = {}

if (status.length > 0) {
      filter.status = status
    }

if (source.length > 0) {
      filter.source = source
    }

if (selectedTags.length > 0) {
      filter.tags = selectedTags
    }

if (dateRange) {
      filter.dateRange = dateRange
    }

onFilter(filter)
  }

const handleReset = () => {
    setStatus([])
    setSource([])
    setSelectedTags([])
    setDateRange(undefined)
    onFilter({})
  }

return (
    <Card>
      <CardContent className="p-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">Status</label>
            <Select
              value={status.length > 0 ? status.join(",") : ""}
              onValueChange={(value) => setStatus(value ? value.split(",") : [])}
            >
              <SelectTrigger>
                <SelectValue placeholder="Todos os status" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos os status</SelectItem>
                {Object.values(LeadStatus).map((status) => (
                  <SelectItem key={status} value={status}>
                    {status.charAt(0).toUpperCase() + status.slice(1)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <label className="text-sm font-medium">Origem</label>
            <Select
              value={source.length > 0 ? source.join(",") : ""}
              onValueChange={(value) => setSource(value ? value.split(",") : [])}
            >
              <SelectTrigger>
                <SelectValue placeholder="Todas as origens" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as origens</SelectItem>
                {sources.map((src) => (
                  <SelectItem key={src} value={src}>
                    {src.charAt(0).toUpperCase() + src.slice(1)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <label className="text-sm font-medium">Tags</label>
            <Select
              value={selectedTags.length > 0 ? selectedTags.join(",") : ""}
              onValueChange={(value) => setSelectedTags(value ? value.split(",") : [])}
            >
              <SelectTrigger>
                <SelectValue placeholder="Todas as tags" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todas as tags</SelectItem>
                {tags.map((tag) => (
                  <SelectItem key={tag} value={tag}>
                    {tag}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <label className="text-sm font-medium">Período</label>
            <DateRangePicker value={dateRange} onChange={setDateRange} placeholder="Selecione o período" />
          </div>
        </div>

<div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={handleReset}>
            Limpar
          </Button>
          <Button onClick={handleFilter}>Filtrar</Button>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/sales/analytics/regional/page.tsx"
"use client"

import { useState, useEffect } from "react"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { leadService } from "@/modules/sales/services/lead-service"
import {
  leadRegionalAnalysisService,
  type RegionalDistribution,
} from "@/modules/sales/services/lead-regional-analysis-service"
import { RegionalDistributionChart } from "@/modules/sales/components/analytics/regional-distribution-chart"
import { BrazilHeatmap } from "@/modules/sales/components/analytics/brazil-heatmap"
import { RegionalStats } from "@/modules/sales/components/analytics/regional-stats"
import { RegionalTopTable } from "@/modules/sales/components/analytics/regional-top-table"
import { RegionalAnalysisFilter } from "@/modules/sales/components/analytics/regional-analysis-filter"
import type { Lead } from "@/modules/sales/types/lead"
import type { LeadRegionalFilter } from "@/modules/sales/services/lead-regional-analysis-service"

export default function RegionalAnalysisPage() {
  const [leads, setLeads] = useState<Lead[]>([])
  const [loading, setLoading] = useState(true)
  const [analysisData, setAnalysisData] = useState<RegionalDistribution | null>(null)
  const [sources, setSources] = useState<string[]>([])
  const [tags, setTags] = useState<string[]>([])
  const [activeTab, setActiveTab] = useState("overview")

// Carregar leads
  useEffect(() => {
    const fetchLeads = async () => {
      setLoading(true)
      try {
        const response = await leadService.getLeads()
        setLeads(response.data)

// Extrair origens únicas
        const uniqueSources = new Set<string>()
        response.data.forEach((lead) => {
          if (lead.source) uniqueSources.add(lead.source)
        })
        setSources(Array.from(uniqueSources))

// Extrair tags únicas
        const uniqueTags = new Set<string>()
        response.data.forEach((lead) => {
          if (lead.tags) {
            lead.tags.forEach((tag) => uniqueTags.add(tag))
          }
        })
        setTags(Array.from(uniqueTags))

// Analisar distribuição regional
        const analysis = leadRegionalAnalysisService.analyzeRegionalDistribution(response.data)
        setAnalysisData(analysis)
      } catch (error) {
        console.error("Erro ao carregar leads:", error)
      } finally {
        setLoading(false)
      }
    }

fetchLeads()
  }, [])

// Aplicar filtros
  const handleFilter = (filter: LeadRegionalFilter) => {
    if (!leads.length) return

const analysis = leadRegionalAnalysisService.analyzeRegionalDistribution(leads, filter)
    setAnalysisData(analysis)
  }

// Preparar dados para os gráficos
  const prepareChartData = () => {
    if (!analysisData) return null

// Dados para gráfico de estados
    const stateData = {
      labels: Object.entries(analysisData.byState)
        .sort((a, b) => b[1] - a[1])
        .map(([state]) => state),
      values: Object.entries(analysisData.byState)
        .sort((a, b) => b[1] - a[1])
        .map(([, count]) => count),
    }

// Dados para gráfico de regiões
    const regionData = {
      labels: Object.entries(analysisData.byRegion)
        .sort((a, b) => b[1] - a[1])
        .map(([region]) => region),
      values: Object.entries(analysisData.byRegion)
        .sort((a, b) => b[1] - a[1])
        .map(([, count]) => count),
      colors: ["#4CAF50", "#2196F3", "#FFC107", "#FF5722", "#9C27B0"],
    }

// Dados para gráfico de tipo de área
    const areaTypeData = {
      labels: ["Áreas Metropolitanas", "Interior"],
      values: [analysisData.metropolitanAreas, analysisData.interiorAreas],
      colors: ["#2196F3", "#4CAF50"],
    }

// Dados para gráfico de validade de telefone
    const phoneValidityData = {
      labels: ["Telefones Válidos", "Telefones Inválidos"],
      values: [analysisData.validPhones, analysisData.invalidPhones],
      colors: ["#4CAF50", "#F44336"],
    }

return {
      stateData,
      regionData,
      areaTypeData,
      phoneValidityData,
    }
  }

const chartData = prepareChartData()

if (loading) {
    return <div className="flex items-center justify-center h-96">Carregando análise regional...</div>
  }

if (!analysisData || !chartData) {
    return <div className="flex items-center justify-center h-96">Nenhum dado disponível para análise.</div>
  }

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Análise Regional de Leads</h1>
        <p className="text-muted-foreground">
          Visualize a distribuição geográfica dos leads com base nos dados de telefone.
        </p>
      </div>

<Tabs value={activeTab} onValueChange={setActiveTab}>
        <TabsList>
          <TabsTrigger value="overview">Visão Geral</TabsTrigger>
          <TabsTrigger value="map">Mapa</TabsTrigger>
          <TabsTrigger value="details">Detalhes</TabsTrigger>
        </TabsList>

<TabsContent value="details" className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <RegionalTopTable title="Top Estados" data={analysisData.topStates} type="states" />
            <RegionalTopTable title="Top DDDs" data={analysisData.topAreaCodes} type="areaCodes" />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/page.tsx"
"use client"

import { useState } from "react"
import Link from "next/link"
import { SalesProvider } from "@/modules/sales/contexts/sales-context"
import { LeadList } from "@/modules/sales/components/leads/lead-list"
import { LeadFilter } from "@/modules/sales/components/leads/lead-filter"
import type { LeadFilter as LeadFilterType } from "@/modules/sales/types/lead"
import type { PaginationParams } from "@/modules/sales/types/pagination"
import { Button } from "@/components/ui/button"
import { PlusCircle, Upload, BarChart } from "lucide-react"

export default function LeadsPage() {
  const [filter, setFilter] = useState<LeadFilterType>({})
  const [pagination] = useState<PaginationParams>({
    page: 1,
    pageSize: 10,
  })

const handleFilterChange = (newFilter: LeadFilterType) => {
    setFilter(newFilter)
  }

return (
    <SalesProvider>
      <div className="container mx-auto py-6">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
          <h1 className="text-3xl font-bold">Leads</h1>
          <div className="flex flex-wrap gap-2">
            <Link href="/sales/analytics/regional" passHref>
              <Button variant="outline">
                <BarChart className="mr-2 h-4 w-4" />
                Análise Regional
              </Button>
            </Link>
            <Link href="/sales/leads/import" passHref>
              <Button variant="outline">
                <Upload className="mr-2 h-4 w-4" />
                Importar Leads
              </Button>
            </Link>
            <Link href="/sales/leads/new" passHref>
              <Button>
                <PlusCircle className="mr-2 h-4 w-4" />
                Novo Lead
              </Button>
            </Link>
          </div>
        </div>
        <LeadFilter onFilter={handleFilterChange} />
        <div className="mt-6">
          <LeadList filter={filter} initialPagination={pagination} />
        </div>
      </div>
    </SalesProvider>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-edit-modal.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { LeadEditForm } from "./lead-edit-form"
import { Edit } from "lucide-react"

interface LeadEditModalProps {
  leadId: string
  onSuccess?: () => void
  buttonLabel?: string
  buttonVariant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link"
  buttonSize?: "default" | "sm" | "lg" | "icon"
}

export function LeadEditModal({
  leadId,
  onSuccess,
  buttonLabel = "Editar Lead",
  buttonVariant = "outline",
  buttonSize = "default",
}: LeadEditModalProps) {
  const [open, setOpen] = useState(false)

const handleSuccess = () => {
    setOpen(false)
    if (onSuccess) {
      onSuccess()
    }
  }

const handleCancel = () => {
    setOpen(false)
  }

return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant={buttonVariant} size={buttonSize}>
          <Edit className="mr-2 h-4 w-4" />
          {buttonLabel}
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[900px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>Editar Lead</DialogTitle>
          <DialogDescription>Atualize as informações do lead no formulário abaixo.</DialogDescription>
        </DialogHeader>
        <LeadEditForm leadId={leadId} onSuccess={handleSuccess} onCancel={handleCancel} />
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-list.tsx" isFixed="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { useLeads } from "../../hooks/use-leads"
import { type Lead, LeadStatus } from "../../types/lead"
import { formatDate } from "../../utils/date-utils"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { MoreHorizontal, Edit, Trash, UserPlus, ExternalLink, Phone, Mail } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Pagination } from "../common/pagination"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { PaginationParams } from "../../types/pagination"
import { LeadFormModal } from "./lead-form-modal"
import { LeadEditModal } from "./lead-edit-modal"

interface LeadListProps {
  onEdit?: (lead: Lead) => void
  onDelete?: (lead: Lead) => void
  onView?: (lead: Lead) => void
  onAssign?: (lead: Lead) => void
  onConvert?: (lead: Lead) => void
  filter?: any
  initialPagination?: PaginationParams
}

export function LeadList({ onEdit, onDelete, onView, onAssign, onConvert, filter, initialPagination }: LeadListProps) {
  const router = useRouter()
  const { leads, loading, error, changeLeadStatus, pagination, setPage, setPageSize, refreshLeads } = useLeads(
    filter,
    initialPagination,
  )
  const [selectedLeads, setSelectedLeads] = useState<string[]>([])

const getStatusBadgeColor = (status: LeadStatus) => {
    switch (status) {
      case LeadStatus.NEW:
        return "bg-blue-500"
      case LeadStatus.CONTACTED:
        return "bg-yellow-500"
      case LeadStatus.QUALIFIED:
        return "bg-green-500"
      case LeadStatus.DISQUALIFIED:
        return "bg-red-500"
      case LeadStatus.CONVERTED:
        return "bg-purple-500"
      default:
        return "bg-gray-500"
    }
  }

const handleStatusChange = async (leadId: string, status: LeadStatus) => {
    try {
      await changeLeadStatus(leadId, status)
    } catch (error) {
      console.error("Failed to change lead status:", error)
    }
  }

const toggleSelectLead = (leadId: string) => {
    setSelectedLeads((prev) => (prev.includes(leadId) ? prev.filter((id) => id !== leadId) : [...prev, leadId]))
  }

const selectAllLeads = () => {
    if (selectedLeads.length === leads.length) {
      setSelectedLeads([])
    } else {
      setSelectedLeads(leads.map((lead) => lead.id))
    }
  }

const handlePageChange = (page: number) => {
    setPage(page)
  }

const handlePageSizeChange = (value: string) => {
    setPageSize(Number(value))
  }

const handleLeadAdded = () => {
    refreshLeads()
  }

const handleLeadEdited = () => {
    refreshLeads()
  }

const handleViewLead = (lead: Lead) => {
    if (onView) {
      onView(lead)
    } else {
      router.push(`/sales/leads/${lead.id}`)
    }
  }

const handleEditLead = (lead: Lead) => {
    if (onEdit) {
      onEdit(lead)
    } else {
      router.push(`/sales/leads/${lead.id}/edit`)
    }
  }

if (error) {
    return <div className="text-red-500">Error: {error}</div>
  }

return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle>Leads</CardTitle>
        <div className="flex space-x-2">
          <Button variant="outline" size="sm" disabled={selectedLeads.length === 0}>
            Bulk Actions
          </Button>
          <LeadFormModal onSuccess={handleLeadAdded} buttonSize="sm" />
        </div>
      </CardHeader>
      <CardContent>
        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-12">
                  <input
                    type="checkbox"
                    checked={selectedLeads.length === leads.length && leads.length > 0}
                    onChange={selectAllLeads}
                    className="h-4 w-4 rounded border-gray-300"
                  />
                </TableHead>
                <TableHead>Name</TableHead>
                <TableHead>Contact</TableHead>
                <TableHead>Source</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Created</TableHead>
                <TableHead>Assigned To</TableHead>
                <TableHead className="w-24">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {loading ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-4">
                    Loading...
                  </TableCell>
                </TableRow>
              ) : leads.length === 0 ? (
                <TableRow>
                  <TableCell colSpan={8} className="text-center py-4">
                    No leads found
                  </TableCell>
                </TableRow>
              ) : (
                leads.map((lead) => (
                  <TableRow key={lead.id}>
                    <TableCell>
                      <input
                        type="checkbox"
                        checked={selectedLeads.includes(lead.id)}
                        onChange={() => toggleSelectLead(lead.id)}
                        className="h-4 w-4 rounded border-gray-300"
                      />
                    </TableCell>
                    <TableCell className="font-medium">
                      <Button variant="link" className="p-0 h-auto" onClick={() => handleViewLead(lead)}>
                        {lead.name}
                      </Button>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-col">
                        <div className="flex items-center">
                          <Mail className="h-3 w-3 mr-1" />
                          <span className="text-xs">{lead.email}</span>
                        </div>
                        <div className="flex items-center mt-1">
                          <Phone className="h-3 w-3 mr-1" />
                          <span className="text-xs">{lead.phone}</span>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>{lead.source}</TableCell>
                    <TableCell>
                      <Badge className={getStatusBadgeColor(lead.status)}>{lead.status}</Badge>
                    </TableCell>
                    <TableCell>{formatDate(lead.createdAt)}</TableCell>
                    <TableCell>{lead.assignedTo || "Unassigned"}</TableCell>
                    <TableCell>
                      <div className="flex items-center">
                        <LeadEditModal
                          leadId={lead.id}
                          buttonVariant="ghost"
                          buttonSize="icon"
                          buttonLabel=""
                          onSuccess={handleLeadEdited}
                        />
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">Open menu</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
                            <DropdownMenuItem onClick={() => handleViewLead(lead)}>
                              <ExternalLink className="h-4 w-4 mr-2" />
                              View
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => handleEditLead(lead)}>
                              <Edit className="h-4 w-4 mr-2" />
                              Edit
                            </DropdownMenuItem>
                            <DropdownMenuItem onClick={() => onAssign?.(lead)}>
                              <UserPlus className="h-4 w-4 mr-2" />
                              Assign
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuLabel>Change Status</DropdownMenuLabel>
                            {Object.values(LeadStatus).map((status) => (
                              <DropdownMenuItem
                                key={status}
                                onClick={() => handleStatusChange(lead.id, status)}
                                disabled={lead.status === status}
                              >
                                <Badge className={`${getStatusBadgeColor(status)} mr-2`}>{status}</Badge>
                                Mark as {status}
                              </DropdownMenuItem>
                            ))}
                            <DropdownMenuSeparator />
                            {lead.status !== LeadStatus.CONVERTED && (
                              <DropdownMenuItem onClick={() => onConvert?.(lead)}>
                                Convert to Opportunity
                              </DropdownMenuItem>
                            )}
                            <DropdownMenuItem onClick={() => onDelete?.(lead)} className="text-red-600">
                              <Trash className="h-4 w-4 mr-2" />
                              Delete
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>
      </CardContent>
      <CardFooter className="flex flex-col sm:flex-row items-center justify-between gap-4 border-t p-4">
        <div className="flex items-center space-x-2">
          <span className="text-sm text-gray-500">Itens por página:</span>
          <Select value={pagination.pageSize.toString()} onValueChange={handlePageSizeChange}>
            <SelectTrigger className="w-[80px]">
              <SelectValue placeholder="10" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="5">5</SelectItem>
              <SelectItem value="10">10</SelectItem>
              <SelectItem value="20">20</SelectItem>
              <SelectItem value="50">50</SelectItem>
            </SelectContent>
          </Select>
        </div>

<Pagination
          currentPage={pagination.page}
          totalPages={pagination.totalPages}
          onPageChange={handlePageChange}
          totalItems={pagination.total}
          pageSize={pagination.pageSize}
          showItemCount={true}
        />
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/services/conversion-analysis-service.ts"
import { getPhoneInfo } from "@/lib/phone-utils"
import { brazilianAreaCodes } from "@/lib/phone-database"
import type { Lead } from "../types/lead"
import type { Opportunity } from "../types/opportunity"
import type { Proposal } from "../types/proposal"
import type { Contract } from "../types/contract"
import { LeadStatus } from "../types/lead"

export interface ConversionMetrics {
  totalLeads: number
  qualifiedLeads: number
  opportunities: number
  proposals: number
  contracts: number
  leadToOpportunityRate: number
  opportunityToProposalRate: number
  proposalToContractRate: number
  overallConversionRate: number
  averageDealSize: number
  averageSalesCycle: number // em dias
}

export interface RegionalConversionData {
  byState: Record<string, ConversionMetrics>
  byRegion: Record<string, ConversionMetrics>
  national: ConversionMetrics
  topPerformingStates: Array<{ state: string; metrics: ConversionMetrics }>
  underperformingStates: Array<{ state: string; metrics: ConversionMetrics }>
}

export interface ConversionFilter {
  dateRange?: { start: Date; end: Date }
  salesReps?: string[]
  sources?: string[]
  tags?: string[]
  minDealSize?: number
  maxDealSize?: number
}

export class ConversionAnalysisService {
  /**
   * Analisa métricas de conversão por região
   */
  analyzeConversionByRegion(
    leads: Lead[],
    opportunities: Opportunity[],
    proposals: Proposal[],
    contracts: Contract[],
    filter?: ConversionFilter,
  ): RegionalConversionData {
    // Aplicar filtros se fornecidos
    const filteredLeads = this.filterLeads(leads, filter)
    const filteredOpportunities = this.filterOpportunities(opportunities, filter)
    const filteredProposals = this.filterProposals(proposals, filter)
    const filteredContracts = this.filterContracts(contracts, filter)

// Inicializar dados por estado e região
    const stateMetrics: Record<string, ConversionMetrics> = {}
    const regionMetrics: Record<string, ConversionMetrics> = {}

// Inicializar contadores nacionais
    const nationalMetrics: ConversionMetrics = this.initializeMetrics()

// Processar leads por estado
    filteredLeads.forEach((lead) => {
      const stateCode = this.getStateFromLead(lead)
      if (!stateCode) return

// Inicializar métricas para o estado se ainda não existirem
      if (!stateMetrics[stateCode]) {
        stateMetrics[stateCode] = this.initializeMetrics()
      }

// Incrementar contadores
      stateMetrics[stateCode].totalLeads++
      nationalMetrics.totalLeads++

if (lead.status === LeadStatus.QUALIFIED) {
        stateMetrics[stateCode].qualifiedLeads++
        nationalMetrics.qualifiedLeads++
      }
    })

// Processar oportunidades por estado
    filteredOpportunities.forEach((opportunity) => {
      const stateCode = this.getStateFromOpportunity(opportunity)
      if (!stateCode) return

// Inicializar métricas para o estado se ainda não existirem
      if (!stateMetrics[stateCode]) {
        stateMetrics[stateCode] = this.initializeMetrics()
      }

// Incrementar contadores
      stateMetrics[stateCode].opportunities++
      nationalMetrics.opportunities++
    })

// Processar propostas por estado
    filteredProposals.forEach((proposal) => {
      const stateCode = this.getStateFromProposal(proposal)
      if (!stateCode) return

// Inicializar métricas para o estado se ainda não existirem
      if (!stateMetrics[stateCode]) {
        stateMetrics[stateCode] = this.initializeMetrics()
      }

// Incrementar contadores
      stateMetrics[stateCode].proposals++
      nationalMetrics.proposals++
    })

// Processar contratos por estado
    filteredContracts.forEach((contract) => {
      const stateCode = this.getStateFromContract(contract)
      if (!stateCode) return

// Inicializar métricas para o estado se ainda não existirem
      if (!stateMetrics[stateCode]) {
        stateMetrics[stateCode] = this.initializeMetrics()
      }

// Incrementar contadores
      stateMetrics[stateCode].contracts++
      nationalMetrics.contracts++

// Adicionar valor do contrato
      if (contract.value) {
        stateMetrics[stateCode].averageDealSize += contract.value
      }

// Calcular ciclo de vendas se tivermos as datas
      if (contract.createdAt && contract.leadCreatedAt) {
        const cycleInDays = this.calculateDaysBetween(contract.leadCreatedAt, contract.createdAt)
        stateMetrics[stateCode].averageSalesCycle += cycleInDays
      }
    })

// Calcular métricas derivadas para cada estado
    Object.keys(stateMetrics).forEach((stateCode) => {
      const metrics = stateMetrics[stateCode]

// Calcular taxas de conversão
      if (metrics.totalLeads > 0) {
        metrics.leadToOpportunityRate = (metrics.opportunities / metrics.totalLeads) * 100
      }

if (metrics.opportunities > 0) {
        metrics.opportunityToProposalRate = (metrics.proposals / metrics.opportunities) * 100
      }

if (metrics.proposals > 0) {
        metrics.proposalToContractRate = (metrics.contracts / metrics.proposals) * 100
      }

if (metrics.totalLeads > 0) {
        metrics.overallConversionRate = (metrics.contracts / metrics.totalLeads) * 100
      }

// Calcular média de valor de contrato
      if (metrics.contracts > 0) {
        metrics.averageDealSize = metrics.averageDealSize / metrics.contracts
      }

// Calcular média de ciclo de vendas
      if (metrics.contracts > 0) {
        metrics.averageSalesCycle = metrics.averageSalesCycle / metrics.contracts
      }

// Agregar dados por região
      const regionName = this.getRegionFromState(stateCode)
      if (regionName) {
        if (!regionMetrics[regionName]) {
          regionMetrics[regionName] = this.initializeMetrics()
        }

// Somar métricas da região
        regionMetrics[regionName].totalLeads += metrics.totalLeads
        regionMetrics[regionName].qualifiedLeads += metrics.qualifiedLeads
        regionMetrics[regionName].opportunities += metrics.opportunities
        regionMetrics[regionName].proposals += metrics.proposals
        regionMetrics[regionName].contracts += metrics.contracts
        regionMetrics[regionName].averageDealSize += metrics.averageDealSize * metrics.contracts
        regionMetrics[regionName].averageSalesCycle += metrics.averageSalesCycle * metrics.contracts
      }
    })

// Calcular métricas derivadas para cada região
    Object.keys(regionMetrics).forEach((regionName) => {
      const metrics = regionMetrics[regionName]

// Calcular taxas de conversão
      if (metrics.totalLeads > 0) {
        metrics.leadToOpportunityRate = (metrics.opportunities / metrics.totalLeads) * 100
      }

if (metrics.opportunities > 0) {
        metrics.opportunityToProposalRate = (metrics.proposals / metrics.opportunities) * 100
      }

if (metrics.proposals > 0) {
        metrics.proposalToContractRate = (metrics.contracts / metrics.proposals) * 100
      }

if (metrics.totalLeads > 0) {
        metrics.overallConversionRate = (metrics.contracts / metrics.totalLeads) * 100
      }

// Calcular média de valor de contrato
      if (metrics.contracts > 0) {
        metrics.averageDealSize = metrics.averageDealSize / metrics.contracts
      }

// Calcular média de ciclo de vendas
      if (metrics.contracts > 0) {
        metrics.averageSalesCycle = metrics.averageSalesCycle / metrics.contracts
      }
    })

// Calcular métricas nacionais
    if (nationalMetrics.totalLeads > 0) {
      nationalMetrics.leadToOpportunityRate = (nationalMetrics.opportunities / nationalMetrics.totalLeads) * 100
    }

if (nationalMetrics.opportunities > 0) {
      nationalMetrics.opportunityToProposalRate = (nationalMetrics.proposals / nationalMetrics.opportunities) * 100
    }

if (nationalMetrics.proposals > 0) {
      nationalMetrics.proposalToContractRate = (nationalMetrics.contracts / nationalMetrics.proposals) * 100
    }

if (nationalMetrics.totalLeads > 0) {
      nationalMetrics.overallConversionRate = (nationalMetrics.contracts / nationalMetrics.totalLeads) * 100
    }

// Calcular top estados e estados com baixo desempenho
    const stateEntries = Object.entries(stateMetrics).filter(([_, metrics]) => metrics.totalLeads >= 5) // Filtrar estados com poucos leads para evitar outliers

const topPerformingStates = stateEntries
      .sort((a, b) => b[1].overallConversionRate - a[1].overallConversionRate)
      .slice(0, 5)
      .map(([state, metrics]) => ({ state, metrics }))

const underperformingStates = stateEntries
      .sort((a, b) => a[1].overallConversionRate - b[1].overallConversionRate)
      .slice(0, 5)
      .map(([state, metrics]) => ({ state, metrics }))

return {
      byState: stateMetrics,
      byRegion: regionMetrics,
      national: nationalMetrics,
      topPerformingStates,
      underperformingStates,
    }
  }

/**
   * Inicializa um objeto de métricas vazio
   */
  private initializeMetrics(): ConversionMetrics {
    return {
      totalLeads: 0,
      qualifiedLeads: 0,
      opportunities: 0,
      proposals: 0,
      contracts: 0,
      leadToOpportunityRate: 0,
      opportunityToProposalRate: 0,
      proposalToContractRate: 0,
      overallConversionRate: 0,
      averageDealSize: 0,
      averageSalesCycle: 0,
    }
  }

/**
   * Extrai o estado a partir de um lead
   */
  private getStateFromLead(lead: Lead): string | null {
    // Primeiro tenta pelo telefone
    if (lead.phone) {
      const phoneInfo = getPhoneInfo(lead.phone)
      if (phoneInfo.stateCode) {
        return phoneInfo.stateCode
      }
    }

// Se não conseguir pelo telefone, tenta pelo estado no endereço
    if (lead.state) {
      // Converte nome do estado para código se necessário
      const stateCode = this.normalizeStateCode(lead.state)
      if (stateCode) {
        return stateCode
      }
    }

return null
  }

/**
   * Extrai o estado a partir de uma oportunidade
   */
  private getStateFromOpportunity(opportunity: Opportunity): string | null {
    // Implementação similar ao getStateFromLead
    // Na prática, você pode ter uma referência ao lead original
    if (opportunity.leadId) {
      // Aqui você buscaria o lead pelo ID e usaria getStateFromLead
      // Para simplificar, vamos usar o estado diretamente da oportunidade
      return opportunity.state || null
    }
    return null
  }

/**
   * Extrai o estado a partir de uma proposta
   */
  private getStateFromProposal(proposal: Proposal): string | null {
    // Similar ao getStateFromOpportunity
    return proposal.state || null
  }

/**
   * Extrai o estado a partir de um contrato
   */
  private getStateFromContract(contract: Contract): string | null {
    // Similar ao getStateFromProposal
    return contract.state || null
  }

/**
   * Obtém a região a partir do código do estado
   */
  private getRegionFromState(stateCode: string): string | null {
    const areaCodeInfo = brazilianAreaCodes.find((info) => info.stateCode === stateCode)
    return areaCodeInfo ? areaCodeInfo.region : null
  }

/**
   * Normaliza o código do estado (converte nome para código se necessário)
   */
  private normalizeStateCode(state: string): string | null {
    // Se já for um código de 2 letras, retorna diretamente
    if (state.length === 2 && state === state.toUpperCase()) {
      return state
    }

// Tenta converter nome do estado para código
    const stateMap: Record<string, string> = {
      acre: "AC",
      alagoas: "AL",
      amapá: "AP",
      amazonas: "AM",
      bahia: "BA",
      ceará: "CE",
      "distrito federal": "DF",
      "espírito santo": "ES",
      goiás: "GO",
      maranhão: "MA",
      "mato grosso": "MT",
      "mato grosso do sul": "MS",
      "minas gerais": "MG",
      pará: "PA",
      paraíba: "PB",
      paraná: "PR",
      pernambuco: "PE",
      piauí: "PI",
      "rio de janeiro": "RJ",
      "rio grande do norte": "RN",
      "rio grande do sul": "RS",
      rondônia: "RO",
      roraima: "RR",
      "santa catarina": "SC",
      "são paulo": "SP",
      sergipe: "SE",
      tocantins: "TO",
    }

const normalizedState = state.toLowerCase().trim()
    return stateMap[normalizedState] || null
  }

/**
   * Calcula o número de dias entre duas datas
   */
  private calculateDaysBetween(startDate: Date, endDate: Date): number {
    const diffTime = Math.abs(endDate.getTime() - startDate.getTime())
    return Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  }

/**
   * Filtra leads com base nos critérios fornecidos
   */
  private filterLeads(leads: Lead[], filter?: ConversionFilter): Lead[] {
    if (!filter) return leads

return leads.filter((lead) => {
      // Filtro por período
      if (filter.dateRange) {
        if (filter.dateRange.start && lead.createdAt < filter.dateRange.start) {
          return false
        }
        if (filter.dateRange.end) {
          const endDate = new Date(filter.dateRange.end)
          endDate.setHours(23, 59, 59, 999) // Fim do dia
          if (lead.createdAt > endDate) {
            return false
          }
        }
      }

// Filtro por representante de vendas
      if (filter.salesReps && filter.salesReps.length > 0) {
        if (!lead.assignedTo || !filter.salesReps.includes(lead.assignedTo)) {
          return false
        }
      }

// Filtro por origem
      if (filter.sources && filter.sources.length > 0) {
        if (!lead.source || !filter.sources.includes(lead.source)) {
          return false
        }
      }

// Filtro por tags
      if (filter.tags && filter.tags.length > 0) {
        if (!lead.tags || !lead.tags.some((tag) => filter.tags!.includes(tag))) {
          return false
        }
      }

return true
    })
  }

/**
   * Filtra oportunidades com base nos critérios fornecidos
   */
  private filterOpportunities(opportunities: Opportunity[], filter?: ConversionFilter): Opportunity[] {
    if (!filter) return opportunities

return opportunities.filter((opportunity) => {
      // Implementação similar ao filterLeads
      // Filtro por período
      if (filter.dateRange) {
        if (filter.dateRange.start && opportunity.createdAt < filter.dateRange.start) {
          return false
        }
        if (filter.dateRange.end) {
          const endDate = new Date(filter.dateRange.end)
          endDate.setHours(23, 59, 59, 999)
          if (opportunity.createdAt > endDate) {
            return false
          }
        }
      }

// Filtro por representante de vendas
      if (filter.salesReps && filter.salesReps.length > 0) {
        if (!opportunity.assignedTo || !filter.salesReps.includes(opportunity.assignedTo)) {
          return false
        }
      }

// Filtro por valor
      if (filter.minDealSize !== undefined && opportunity.estimatedValue < filter.minDealSize) {
        return false
      }

if (filter.maxDealSize !== undefined && opportunity.estimatedValue > filter.maxDealSize) {
        return false
      }

return true
    })
  }

/**
   * Filtra propostas com base nos critérios fornecidos
   */
  private filterProposals(proposals: Proposal[], filter?: ConversionFilter): Proposal[] {
    if (!filter) return proposals

return proposals.filter((proposal) => {
      // Implementação similar ao filterOpportunities
      // Filtro por período
      if (filter.dateRange) {
        if (filter.dateRange.start && proposal.createdAt < filter.dateRange.start) {
          return false
        }
        if (filter.dateRange.end) {
          const endDate = new Date(filter.dateRange.end)
          endDate.setHours(23, 59, 59, 999)
          if (proposal.createdAt > endDate) {
            return false
          }
        }
      }

// Filtro por representante de vendas
      if (filter.salesReps && filter.salesReps.length > 0) {
        if (!proposal.assignedTo || !filter.salesReps.includes(proposal.assignedTo)) {
          return false
        }
      }

// Filtro por valor
      if (filter.minDealSize !== undefined && proposal.value < filter.minDealSize) {
        return false
      }

if (filter.maxDealSize !== undefined && proposal.value > filter.maxDealSize) {
        return false
      }

return true
    })
  }

/**
   * Filtra contratos com base nos critérios fornecidos
   */
  private filterContracts(contracts: Contract[], filter?: ConversionFilter): Contract[] {
    if (!filter) return contracts

return contracts.filter((contract) => {
      // Implementação similar ao filterProposals
      // Filtro por período
      if (filter.dateRange) {
        if (filter.dateRange.start && contract.createdAt < filter.dateRange.start) {
          return false
        }
        if (filter.dateRange.end) {
          const endDate = new Date(filter.dateRange.end)
          endDate.setHours(23, 59, 59, 999)
          if (contract.createdAt > endDate) {
            return false
          }
        }
      }

// Filtro por representante de vendas
      if (filter.salesReps && filter.salesReps.length > 0) {
        if (!contract.assignedTo || !filter.salesReps.includes(contract.assignedTo)) {
          return false
        }
      }

// Filtro por valor
      if (filter.minDealSize !== undefined && contract.value < filter.minDealSize) {
        return false
      }

if (filter.maxDealSize !== undefined && contract.value > filter.maxDealSize) {
        return false
      }

return true
    })
  }
}

export const conversionAnalysisService = new ConversionAnalysisService()
[V0_FILE]typescriptreact:file="modules/sales/types/lead.ts" isQuickEdit="true"
export interface Lead {
  id: string
  name: string
  email: string
  phone: string
  address: string
  city: string
  state: string
  zipCode: string
  source: string
  status: LeadStatus
  notes: string
  createdAt: Date
  updatedAt: Date
  assignedTo?: string
  lastContactDate?: Date
  score?: number
  tags?: string[]
  customFields?: Record<string, any>
}

export enum LeadStatus {
  NEW = "new",
  CONTACTED = "contacted",
  QUALIFIED = "qualified",
  DISQUALIFIED = "disqualified",
  CONVERTED = "converted",
}

export interface LeadFilter {
  status?: LeadStatus[]
  source?: string[]
  assignedTo?: string[]
  dateRange?: {
    start: Date
    end: Date
  }
  search?: string
  tags?: string[]
}
[V0_FILE]typescriptreact:file="modules/sales/hooks/use-leads.ts" isQuickEdit="true"
"use client"

import { useState, useEffect, useCallback } from "react"
import { LeadService } from "../services/lead-service"
import type { Lead, LeadFilter, LeadStatus } from "../types/lead"
import type { PaginationParams } from "../types/pagination"

const leadService = new LeadService()

export function useLeads(initialFilter?: LeadFilter, initialPagination?: PaginationParams) {
  const [leads, setLeads] = useState<Lead[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [filter, setFilter] = useState<LeadFilter>(initialFilter || {})
  const [pagination, setPagination] = useState<PaginationParams>(initialPagination || { page: 1, pageSize: 10 })
  const [paginationInfo, setPaginationInfo] = useState({
    total: 0,
    totalPages: 0,
    hasNext: false,
    hasPrevious: false,
  })

const fetchLeads = useCallback(async () => {
    setLoading(true)
    try {
      const result = await leadService.getLeads(filter, pagination)
      setLeads(result.data)
      setPaginationInfo({
        total: result.pagination.total,
        totalPages: result.pagination.totalPages,
        hasNext: result.pagination.hasNext,
        hasPrevious: result.pagination.hasPrevious,
      })
      setError(null)
    } catch (err) {
      console.error("Error fetching leads:", err)
      setError("Falha ao carregar leads. Por favor, tente novamente.")
    } finally {
      setLoading(false)
    }
  }, [filter, pagination])

useEffect(() => {
    fetchLeads()
  }, [fetchLeads])

const changeLeadStatus = async (leadId: string, status: LeadStatus) => {
    try {
      const updatedLead = await leadService.changeLeadStatus(leadId, status)
      setLeads((prevLeads) =>
        prevLeads.map((lead) => (lead.id === leadId ? { ...lead, status: updatedLead.status } : lead)),
      )
      return updatedLead
    } catch (err) {
      console.error("Error changing lead status:", err)
      setError("Falha ao atualizar o status do lead.")
      throw err
    }
  }

const updateLead = async (leadId: string, leadData: Partial<Lead>) => {
    try {
      const updatedLead = await leadService.updateLead(leadId, leadData)
      setLeads((prevLeads) => prevLeads.map((lead) => (lead.id === leadId ? updatedLead : lead)))
      return updatedLead
    } catch (err) {
      console.error("Error updating lead:", err)
      setError("Falha ao atualizar o lead.")
      throw err
    }
  }

const refreshLeads = () => {
    fetchLeads()
  }

const setPage = (page: number) => {
    setPagination((prev) => ({ ...prev, page }))
  }

const setPageSize = (pageSize: number) => {
    setPagination({ page: 1, pageSize }) // Reset to first page when changing page size
  }

return {
    leads,
    loading,
    error,
    filter,
    setFilter,
    pagination: {
      ...pagination,
      ...paginationInfo,
    },
    setPage,
    setPageSize,
    changeLeadStatus,
    updateLead,
    refreshLeads,
  }
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-form.tsx" isQuickEdit="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { LeadStatus } from "../../types/lead"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { LeadService } from "../../services/lead-service"
import { toast } from "@/components/ui/use-toast"
import { Loader2 } from "lucide-react"

// Esquema de validação para o formulário de lead
const leadFormSchema = z.object({
  name: z.string().min(2, {
    message: "O nome deve ter pelo menos 2 caracteres.",
  }),
  email: z.string().email({
    message: "Email inválido.",
  }),
  phone: z.string().min(10, {
    message: "O telefone deve ter pelo menos 10 dígitos.",
  }),
  address: z.string().min(5, {
    message: "O endereço deve ter pelo menos 5 caracteres.",
  }),
  city: z.string().min(2, {
    message: "A cidade deve ter pelo menos 2 caracteres.",
  }),
  state: z.string().min(2, {
    message: "O estado deve ter pelo menos 2 caracteres.",
  }),
  zipCode: z.string().min(5, {
    message: "O CEP deve ter pelo menos 5 caracteres.",
  }),
  source: z.string().min(1, {
    message: "A origem é obrigatória.",
  }),
  status: z.nativeEnum(LeadStatus, {
    errorMap: () => ({ message: "Status inválido." }),
  }),
  notes: z.string().optional(),
  tags: z.string().optional(),
})

type LeadFormValues = z.infer<typeof leadFormSchema>

// Opções para o campo de origem
const sourceOptions = [
  { value: "website", label: "Website" },
  { value: "referral", label: "Indicação" },
  { value: "social", label: "Redes Sociais" },
  { value: "event", label: "Evento" },
  { value: "advertisement", label: "Anúncio" },
  { value: "other", label: "Outro" },
]

interface LeadFormProps {
  onSuccess?: () => void
  onCancel?: () => void
}

export function LeadForm({ onSuccess, onCancel }: LeadFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const router = useRouter()
  const leadService = new LeadService()

// Valores padrão para o formulário
  const defaultValues: Partial<LeadFormValues> = {
    status: LeadStatus.NEW,
    notes: "",
  }

const form = useForm<LeadFormValues>({
    resolver: zodResolver(leadFormSchema),
    defaultValues,
  })

async function onSubmit(values: LeadFormValues) {
    setIsSubmitting(true)
    try {
      // Converter tags de string para array
      const tagsArray = values.tags ? values.tags.split(",").map((tag) => tag.trim()) : []

// Criar o lead
      await leadService.createLead({
        ...values,
        tags: tagsArray,
        customFields: {},
      })

toast({
        title: "Lead criado com sucesso",
        description: "O novo lead foi adicionado ao sistema.",
        variant: "default",
      })

// Resetar o formulário
      form.reset()

// Callback de sucesso
      if (onSuccess) {
        onSuccess()
      } else {
        // Redirecionar para a lista de leads
        router.push("/sales/leads")
        router.refresh()
      }
    } catch (error) {
      console.error("Erro ao criar lead:", error)
      toast({
        title: "Erro ao criar lead",
        description: "Ocorreu um erro ao tentar criar o lead. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle>Adicionar Novo Lead</CardTitle>
        <CardDescription>Preencha o formulário abaixo para adicionar um novo lead ao sistema.</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Nome */}
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nome</FormLabel>
                    <FormControl>
                      <Input placeholder="Nome completo" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Email */}
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input type="email" placeholder="email@exemplo.com" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Telefone */}
              <FormField
                control={form.control}
                name="phone"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Telefone</FormLabel>
                    <FormControl>
                      <Input placeholder="(00) 00000-0000" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Origem */}
              <FormField
                control={form.control}
                name="source"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Origem</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione a origem" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {sourceOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Status */}
              <FormField
                control={form.control}
                name="status"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Status</FormLabel>
                    <Select onValueChange={field.onChange} defaultValue={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o status" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {Object.values(LeadStatus).map((status) => (
                          <SelectItem key={status} value={status}>
                            {status.charAt(0).toUpperCase() + status.slice(1)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Endereço */}
              <FormField
                control={form.control}
                name="address"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Endereço</FormLabel>
                    <FormControl>
                      <Input placeholder="Rua, número, complemento" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Cidade */}
              <FormField
                control={form.control}
                name="city"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Cidade</FormLabel>
                    <FormControl>
                      <Input placeholder="Cidade" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Estado */}
              <FormField
                control={form.control}
                name="state"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Estado</FormLabel>
                    <FormControl>
                      <Input placeholder="UF" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* CEP */}
              <FormField
                control={form.control}
                name="zipCode"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>CEP</FormLabel>
                    <FormControl>
                      <Input placeholder="00000-000" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Tags */}
              <FormField
                control={form.control}
                name="tags"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Tags</FormLabel>
                    <FormControl>
                      <Input placeholder="residencial, alto-potencial, etc." {...field} />
                    </FormControl>
                    <FormDescription>Separe as tags por vírgula.</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />
            </div>

{/* Notas */}
            <FormField
              control={form.control}
              name="notes"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Notas</FormLabel>
                  <FormControl>
                    <Textarea placeholder="Informações adicionais sobre o lead" className="min-h-[100px]" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />

<CardFooter className="flex justify-between px-0">
              <Button type="button" variant="outline" onClick={onCancel}>
                Cancelar
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Salvar Lead
              </Button>
            </CardFooter>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/leads/lead-edit-form.tsx" isQuickEdit="true"
"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { type Lead, LeadStatus } from "../../types/lead"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { LeadService } from "../../services/lead-service"
import { toast } from "@/components/ui/use-toast"
import { Loader2 } from "lucide-react"
import { Skeleton } from "@/components/ui/skeleton"

type LeadFormValues = z.infer<typeof leadFormSchema>

// Opções para o campo de representante de vendas
const salesRepOptions = [
  { value: "Carlos Vendas", label: "Carlos Vendas" },
  { value: "Ana Vendas", label: "Ana Vendas" },
  { value: "Roberto Vendas", label: "Roberto Vendas" },
  { value: "Juliana Vendas", label: "Juliana Vendas" },
]

interface LeadEditFormProps {
  leadId: string
  onSuccess?: () => void
  onCancel?: () => void
}

export function LeadEditForm({ leadId, onSuccess, onCancel }: LeadEditFormProps) {
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const [lead, setLead] = useState<Lead | null>(null)
  const router = useRouter()
  const leadService = new LeadService()

// Formulário com valores padrão vazios
  const form = useForm<LeadFormValues>({
    resolver: zodResolver(leadFormSchema),
    defaultValues: {
      name: "",
      email: "",
      phone: "",
      address: "",
      city: "",
      state: "",
      zipCode: "",
      source: "",
      status: LeadStatus.NEW,
      notes: "",
      tags: "",
      assignedTo: "",
    },
  })

// Carregar os dados do lead
  useEffect(() => {
    async function loadLead() {
      setIsLoading(true)
      try {
        const leadData = await leadService.getLeadById(leadId)
        if (leadData) {
          setLead(leadData)

// Converter tags de array para string
          const tagsString = leadData.tags ? leadData.tags.join(", ") : ""

// Preencher o formulário com os dados do lead
          form.reset({
            name: leadData.name,
            email: leadData.email,
            phone: leadData.phone,
            address: leadData.address,
            city: leadData.city,
            state: leadData.state,
            zipCode: leadData.zipCode,
            source: leadData.source,
            status: leadData.status,
            notes: leadData.notes,
            tags: tagsString,
            assignedTo: leadData.assignedTo || "",
            score: leadData.score,
          })
        } else {
          toast({
            title: "Lead não encontrado",
            description: "Não foi possível encontrar o lead especificado.",
            variant: "destructive",
          })
          if (onCancel) {
            onCancel()
          } else {
            router.push("/sales/leads")
          }
        }
      } catch (error) {
        console.error("Erro ao carregar lead:", error)
        toast({
          title: "Erro ao carregar lead",
          description: "Ocorreu um erro ao tentar carregar os dados do lead.",
          variant: "destructive",
        })
      } finally {
        setIsLoading(false)
      }
    }

loadLead()
  }, [leadId, form, router, onCancel])

// Atualizar o lead
      await leadService.updateLead(leadId, {
        ...values,
        tags: tagsArray,
      })

toast({
        title: "Lead atualizado com sucesso",
        description: "As alterações foram salvas com sucesso.",
        variant: "default",
      })

// Callback de sucesso
      if (onSuccess) {
        onSuccess()
      } else {
        // Redirecionar para a página de detalhes do lead
        router.push(`/sales/leads/${leadId}`)
        router.refresh()
      }
    } catch (error) {
      console.error("Erro ao atualizar lead:", error)
      toast({
        title: "Erro ao atualizar lead",
        description: "Ocorreu um erro ao tentar atualizar o lead. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

if (isLoading) {
    return (
      <Card className="w-full max-w-4xl mx-auto">
        <CardHeader>
          <Skeleton className="h-8 w-3/4" />
          <Skeleton className="h-4 w-1/2 mt-2" />
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {Array.from({ length: 8 }).map((_, index) => (
                <div key={index} className="space-y-2">
                  <Skeleton className="h-4 w-1/3" />
                  <Skeleton className="h-10 w-full" />
                </div>
              ))}
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-24 w-full" />
            </div>
          </div>
        </CardContent>
        <CardFooter>
          <div className="flex justify-between w-full">
            <Skeleton className="h-10 w-24" />
            <Skeleton className="h-10 w-24" />
          </div>
        </CardFooter>
      </Card>
    )
  }

return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <CardTitle>Editar Lead</CardTitle>
        <CardDescription>Atualize as informações do lead no formulário abaixo.</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Nome */}
              <FormField
                control={form.control}
                name="name"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Nome</FormLabel>
                    <FormControl>
                      <Input placeholder="Nome completo" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Origem */}
              <FormField
                control={form.control}
                name="source"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Origem</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione a origem" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {sourceOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Status */}
              <FormField
                control={form.control}
                name="status"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Status</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o status" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        {Object.values(LeadStatus).map((status) => (
                          <SelectItem key={status} value={status}>
                            {status.charAt(0).toUpperCase() + status.slice(1)}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Responsável */}
              <FormField
                control={form.control}
                name="assignedTo"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Responsável</FormLabel>
                    <Select onValueChange={field.onChange} value={field.value || ""}>
                      <FormControl>
                        <SelectTrigger>
                          <SelectValue placeholder="Selecione o responsável" />
                        </SelectTrigger>
                      </FormControl>
                      <SelectContent>
                        <SelectItem value="not_assigned">Não atribuído</SelectItem>
                        {salesRepOptions.map((option) => (
                          <SelectItem key={option.value} value={option.value}>
                            {option.label}
                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                    <FormMessage />
                  </FormItem>
                )}
              />

{/* Pontuação */}
              <FormField
                control={form.control}
                name="score"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Pontuação</FormLabel>
                    <FormControl>
                      <Input
                        type="number"
                        min="0"
                        max="100"
                        placeholder="0-100"
                        {...field}
                        value={field.value || ""}
                        onChange={(e) => field.onChange(e.target.value ? Number(e.target.value) : undefined)}
                      />
                    </FormControl>
                    <FormDescription>Pontuação de 0 a 100</FormDescription>
                    <FormMessage />
                  </FormItem>
                )}
              />

<CardFooter className="flex justify-between px-0">
              <Button type="button" variant="outline" onClick={onCancel}>
                Cancelar
              </Button>
              <Button type="submit" disabled={isSubmitting}>
                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                Salvar Alterações
              </Button>
            </CardFooter>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/hooks/use-lead-locations.ts"
"use client"

import { useState, useEffect } from "react"
import type { Lead, LeadFilter } from "../types/lead"
import { LeadService } from "../services/lead-service"
import { GeocodingService } from "../services/geocoding-service"

export type LeadLocation = {
  lead: Lead
  position: {
    lat: number
    lng: number
  }
  success: boolean
}

export function useLeadLocations(filter?: LeadFilter) {
  const [locations, setLocations] = useState<LeadLocation[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

useEffect(() => {
    let isMounted = true

const fetchLeadLocations = async () => {
      try {
        setLoading(true)
        setError(null)

// Fetch leads with the provided filter
        const leadService = new LeadService()
        const result = await leadService.getLeads(filter, { page: 1, pageSize: 1000 })
        const leads = result.data

// Get unique addresses to geocode
        const addressMap = new Map<string, Lead[]>()
        leads.forEach((lead) => {
          const fullAddress = GeocodingService.getFullAddress(lead)
          if (!addressMap.has(fullAddress)) {
            addressMap.set(fullAddress, [])
          }
          addressMap.get(fullAddress)!.push(lead)
        })

// Geocode all unique addresses
        const addresses = Array.from(addressMap.keys())
        const geocodeResults = await GeocodingService.batchGeocodeAddresses(addresses)

// Map geocode results back to leads
        const leadLocations: LeadLocation[] = []
        addresses.forEach((address) => {
          const geocodeResult = geocodeResults[address]
          const leadsAtAddress = addressMap.get(address) || []

leadsAtAddress.forEach((lead) => {
            leadLocations.push({
              lead,
              position: {
                lat: geocodeResult.lat,
                lng: geocodeResult.lng,
              },
              success: geocodeResult.success,
            })
          })
        })

if (isMounted) {
          setLocations(leadLocations.filter((loc) => loc.success))
          setLoading(false)
        }
      } catch (err) {
        console.error("Error fetching lead locations:", err)
        if (isMounted) {
          setError(`Failed to load lead locations: ${err instanceof Error ? err.message : String(err)}`)
          setLoading(false)
        }
      }
    }

fetchLeadLocations()

return () => {
      isMounted = false
    }
  }, [filter])

return { locations, loading, error }
}
[V0_FILE]typescriptreact:file="modules/sales/components/map/lead-map-filter.tsx"
"use client"

import { useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import { LeadStatus, type LeadFilter } from "../../types/lead"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { ChevronDown, ChevronUp, Filter } from "lucide-react"

interface LeadMapFilterProps {
  onFilterChange: (filter: LeadFilter) => void
  sources: string[]
  tags: string[]
}

export function LeadMapFilter({ onFilterChange, sources, tags }: LeadMapFilterProps) {
  const [isExpanded, setIsExpanded] = useState(false)
  const [filter, setFilter] = useState<LeadFilter>({})

// Status filter
  const [selectedStatuses, setSelectedStatuses] = useState<LeadStatus[]>([])
  const [selectedSources, setSelectedSources] = useState<string[]>([])
  const [selectedTags, setSelectedTags] = useState<string[]>([])
  const [searchTerm, setSearchTerm] = useState("")
  const [dateRange, setDateRange] = useState<{ start: Date; end: Date } | undefined>()

const handleStatusChange = (status: LeadStatus) => {
    setSelectedStatuses((prev) => {
      if (prev.includes(status)) {
        return prev.filter((s) => s !== status)
      } else {
        return [...prev, status]
      }
    })
  }

const handleSourceChange = (value: string) => {
    setSelectedSources((prev) => {
      if (value === "all") return []

const values = value.split(",").filter(Boolean)
      return values
    })
  }

const handleTagChange = (value: string) => {
    setSelectedTags((prev) => {
      if (value === "all") return []

const values = value.split(",").filter(Boolean)
      return values
    })
  }

const applyFilter = () => {
    const newFilter: LeadFilter = {}

if (selectedStatuses.length > 0) {
      newFilter.status = selectedStatuses
    }

if (selectedSources.length > 0) {
      newFilter.source = selectedSources
    }

if (selectedTags.length > 0) {
      newFilter.tags = selectedTags
    }

if (searchTerm) {
      newFilter.search = searchTerm
    }

if (dateRange) {
      newFilter.dateRange = dateRange
    }

setFilter(newFilter)
    onFilterChange(newFilter)
  }

const resetFilter = () => {
    setSelectedStatuses([])
    setSelectedSources([])
    setSelectedTags([])
    setSearchTerm("")
    setDateRange(undefined)
    setFilter({})
    onFilterChange({})
  }

return (
    <Card className="w-full mb-4">
      <div
        className="p-3 flex justify-between items-center cursor-pointer border-b"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex items-center">
          <Filter className="h-4 w-4 mr-2" />
          <span className="font-medium">Filtrar Leads no Mapa</span>
        </div>
        {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
      </div>

{isExpanded && (
        <CardContent className="p-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
            <div className="space-y-2">
              <Label>Status</Label>
              <div className="space-y-2">
                {Object.values(LeadStatus).map((status) => (
                  <div key={status} className="flex items-center space-x-2">
                    <Checkbox
                      id={`status-${status}`}
                      checked={selectedStatuses.includes(status)}
                      onCheckedChange={() => handleStatusChange(status)}
                    />
                    <Label htmlFor={`status-${status}`} className="cursor-pointer">
                      {status.charAt(0).toUpperCase() + status.slice(1)}
                    </Label>
                  </div>
                ))}
              </div>
            </div>

<div className="space-y-2">
              <Label>Origem</Label>
              <Select
                value={selectedSources.length > 0 ? selectedSources.join(",") : "all"}
                onValueChange={handleSourceChange}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Todas as origens" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todas as origens</SelectItem>
                  {sources.map((source) => (
                    <SelectItem key={source} value={source}>
                      {source.charAt(0).toUpperCase() + source.slice(1)}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Tags</Label>
              <Select value={selectedTags.length > 0 ? selectedTags.join(",") : "all"} onValueChange={handleTagChange}>
                <SelectTrigger>
                  <SelectValue placeholder="Todas as tags" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">Todas as tags</SelectItem>
                  {tags.map((tag) => (
                    <SelectItem key={tag} value={tag}>
                      {tag}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label>Buscar</Label>
              <Input
                placeholder="Nome, email ou telefone"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>

<div className="space-y-2 md:col-span-2 lg:col-span-2">
              <Label>Período</Label>
              <DateRangePicker value={dateRange} onChange={setDateRange} placeholder="Selecione o período" />
            </div>
          </div>

<div className="flex justify-end space-x-2">
            <Button variant="outline" onClick={resetFilter}>
              Limpar Filtros
            </Button>
            <Button onClick={applyFilter}>Aplicar Filtros</Button>
          </div>
        </CardContent>
      )}
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/layout.tsx"
import type React from "react"
import type { Metadata } from "next"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { PlusCircle, List, MapPin } from "lucide-react"

export const metadata: Metadata = {
  title: "Leads | Circe Solar",
  description: "Gerenciamento de leads para vendas de sistemas solares",
}

export default function LeadsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="container mx-auto py-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold">Leads</h1>
        <Link href="/sales/leads/new">
          <Button>
            <PlusCircle className="h-4 w-4 mr-2" />
            Novo Lead
          </Button>
        </Link>
      </div>

<Tabs defaultValue="list" className="mb-6">
        <TabsList>
          <Link href="/sales/leads">
            <TabsTrigger value="list">
              <List className="h-4 w-4 mr-2" />
              Lista
            </TabsTrigger>
          </Link>
          <Link href="/sales/leads/map">
            <TabsTrigger value="map">
              <MapPin className="h-4 w-4 mr-2" />
              Mapa
            </TabsTrigger>
          </Link>
        </TabsList>
      </Tabs>

{children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/utils/date-utils.ts"
// Format a date to a readable string
export function formatDate(date: Date): string {
  if (!date) return ""

// Ensure we have a Date object
  const dateObj = date instanceof Date ? date : new Date(date)

// Format as DD/MM/YYYY
  return dateObj.toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
  })
}

// Format a date with time
export function formatDateTime(date: Date): string {
  if (!date) return ""

// Ensure we have a Date object
  const dateObj = date instanceof Date ? date : new Date(date)

// Format as DD/MM/YYYY HH:MM
  return dateObj.toLocaleDateString("pt-BR", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  })
}

// Get relative time (e.g., "2 days ago")
export function getRelativeTime(date: Date): string {
  if (!date) return ""

// Ensure we have a Date object
  const dateObj = date instanceof Date ? date : new Date(date)

const now = new Date()
  const diffInSeconds = Math.floor((now.getTime() - dateObj.getTime()) / 1000)

if (diffInSeconds < 60) {
    return "agora mesmo"
  }

const diffInMinutes = Math.floor(diffInSeconds / 60)
  if (diffInMinutes < 60) {
    return `${diffInMinutes} ${diffInMinutes === 1 ? "minuto" : "minutos"} atrás`
  }

const diffInHours = Math.floor(diffInMinutes / 60)
  if (diffInHours < 24) {
    return `${diffInHours} ${diffInHours === 1 ? "hora" : "horas"} atrás`
  }

const diffInDays = Math.floor(diffInHours / 24)
  if (diffInDays < 30) {
    return `${diffInDays} ${diffInDays === 1 ? "dia" : "dias"} atrás`
  }

const diffInMonths = Math.floor(diffInDays / 30)
  if (diffInMonths < 12) {
    return `${diffInMonths} ${diffInMonths === 1 ? "mês" : "meses"} atrás`
  }

const diffInYears = Math.floor(diffInMonths / 12)
  return `${diffInYears} ${diffInYears === 1 ? "ano" : "anos"} atrás`
}
[V0_FILE]typescriptreact:file="modules/sales/services/lead-clustering-service.ts" isFixed="true" isQuickEdit="true"
import type { Lead } from "../types/lead"
import { LeadStatus } from "../types/lead"

export interface ClusterPoint {
  lat: number
  lng: number
  lead: Lead
}

export interface Cluster {
  id: string
  center: {
    lat: number
    lng: number
  }
  points: ClusterPoint[]
  bounds: {
    north: number
    south: number
    east: number
    west: number
  }
  stats: {
    totalLeads: number
    statusCounts: Record<LeadStatus, number>
    averagePotentialValue: number
    tags: Record<string, number>
  }
}

export interface ClusteringOptions {
  gridSize: number // Size of the grid cells for clustering (in pixels)
  maxZoom: number // Maximum zoom level to cluster points
  minClusterSize: number // Minimum number of points to form a cluster
  radiusMultiplier: number // Multiplier for the default radius
}

// Declare google variable to avoid Typescript errors.
declare var google: any

export class LeadClusteringService {
  private static defaultOptions: ClusteringOptions = {
    gridSize: 60,
    maxZoom: 15,
    minClusterSize: 2,
    radiusMultiplier: 1.5,
  }

/**
   * Clusters lead points based on proximity and current map state
   */
  static clusterPoints(
    points: ClusterPoint[],
    mapBounds: google.maps.LatLngBounds,
    zoom: number,
    options: Partial<ClusteringOptions> = {},
  ): Cluster[] {
    const mergedOptions = { ...this.defaultOptions, ...options }
    const { gridSize, maxZoom, minClusterSize } = mergedOptions

// If zoom level is beyond maxZoom, don't cluster
    if (zoom >= maxZoom) {
      return points.map((point) => this.createSinglePointCluster(point))
    }

// Calculate the grid cell size based on the current zoom level
    // As zoom increases, grid cells get smaller
    const zoomFactor = Math.pow(2, zoom) / 512
    const effectiveGridSize = gridSize / zoomFactor

// Group points into grid cells
    const grid: Record<string, ClusterPoint[]> = {}

points.forEach((point) => {
      // Skip points outside the visible bounds
      if (!this.isPointInBounds(point, mapBounds)) {
        return
      }

// Calculate grid cell index
      const cellX = Math.floor(point.lng / effectiveGridSize)
      const cellY = Math.floor(point.lat / effectiveGridSize)
      const cellKey = `${cellX}:${cellY}`

if (!grid[cellKey]) {
        grid[cellKey] = []
      }

grid[cellKey].push(point)
    })

// Convert grid cells to clusters
    const clusters: Cluster[] = []

Object.entries(grid).forEach(([cellKey, cellPoints]) => {
      // Skip cells with too few points
      if (cellPoints.length < minClusterSize) {
        cellPoints.forEach((point) => {
          clusters.push(this.createSinglePointCluster(point))
        })
        return
      }

// Create a cluster for this cell
      clusters.push(this.createCluster(cellKey, cellPoints))
    })

return clusters
  }

/**
   * Creates a cluster from a collection of points
   */
  private static createCluster(id: string, points: ClusterPoint[]): Cluster {
    // Calculate cluster center (average of all points)
    const center = this.calculateCenter(points)

// Calculate cluster bounds
    const bounds = this.calculateBounds(points)

// Calculate cluster statistics
    const stats = this.calculateClusterStats(points)

return {
      id,
      center,
      points,
      bounds,
      stats,
    }
  }

/**
   * Creates a single-point cluster
   */
  private static createSinglePointCluster(point: ClusterPoint): Cluster {
    const statusCounts = {} as Record<LeadStatus, number>
    statusCounts[point.lead.status] = 1

const tagCounts: Record<string, number> = {}
    if (point.lead.tags) {
      point.lead.tags.forEach((tag) => {
        tagCounts[tag] = 1
      })
    }

return {
      id: `single-${point.lead.id}`,
      center: {
        lat: point.lat,
        lng: point.lng,
      },
      points: [point],
      bounds: {
        north: point.lat + 0.0001,
        south: point.lat - 0.0001,
        east: point.lng + 0.0001,
        west: point.lng - 0.0001,
      },
      stats: {
        totalLeads: 1,
        statusCounts,
        averagePotentialValue: point.lead.potentialValue || 0,
        tags: tagCounts,
      },
    }
  }

/**
   * Calculates the center point of a cluster
   */
  private static calculateCenter(points: ClusterPoint[]): { lat: number; lng: number } {
    const sumLat = points.reduce((sum, point) => sum + point.lat, 0)
    const sumLng = points.reduce((sum, point) => sum + point.lng, 0)

return {
      lat: sumLat / points.length,
      lng: sumLng / points.length,
    }
  }

/**
   * Calculates the bounds of a cluster
   */
  private static calculateBounds(points: ClusterPoint[]): {
    north: number
    south: number
    east: number
    west: number
  } {
    let north = -90
    let south = 90
    let east = -180
    let west = 180

points.forEach((point) => {
      north = Math.max(north, point.lat)
      south = Math.min(south, point.lat)
      east = Math.max(east, point.lng)
      west = Math.min(west, point.lng)
    })

return { north, south, east, west }
  }

/**
   * Calculates statistics for a cluster
   */
  private static calculateClusterStats(points: ClusterPoint[]): {
    totalLeads: number
    statusCounts: Record<LeadStatus, number>
    averagePotentialValue: number
    tags: Record<string, number>
  } {
    const totalLeads = points.length

// Count leads by status
    const statusCounts = {} as Record<LeadStatus, number>
    Object.values(LeadStatus).forEach((status) => {
      statusCounts[status] = 0
    })

// Count leads by tag
    const tagCounts: Record<string, number> = {}

// Calculate average potential value
    let totalPotentialValue = 0

points.forEach((point) => {
      // Update status counts
      statusCounts[point.lead.status] = (statusCounts[point.lead.status] || 0) + 1

// Update tag counts
      if (point.lead.tags) {
        point.lead.tags.forEach((tag) => {
          tagCounts[tag] = (tagCounts[tag] || 0) + 1
        })
      }

// Update potential value sum
      totalPotentialValue += point.lead.potentialValue || 0
    })

const averagePotentialValue = totalPotentialValue / totalLeads

return {
      totalLeads,
      statusCounts,
      averagePotentialValue,
      tags: tagCounts,
    }
  }

/**
   * Checks if a point is within the given bounds
   */
  private static isPointInBounds(point: ClusterPoint, bounds: google.maps.LatLngBounds): boolean {
    const latLng = new google.maps.LatLng(point.lat, point.lng)
    return bounds.contains(latLng)
  }
}
[V0_FILE]typescriptreact:file="modules/sales/components/map/advanced-cluster-marker.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useState, useCallback } from "react"
import { OverlayView } from "@react-google-maps/api"
import type { Cluster } from "../../services/lead-clustering-service"
import { LeadStatus } from "../../types/lead"
import { formatCurrency } from "../../utils/format-utils"
import { cn } from "@/lib/utils"
import { google } from "@react-google-maps/api"

interface AdvancedClusterMarkerProps {
  cluster: Cluster
  onClusterClick: (cluster: Cluster) => void
}

// Status colors for the pie chart segments
const statusColors: Record<LeadStatus, string> = {
  [LeadStatus.NEW]: "#3b82f6", // blue-500
  [LeadStatus.CONTACTED]: "#eab308", // yellow-500
  [LeadStatus.QUALIFIED]: "#22c55e", // green-500
  [LeadStatus.DISQUALIFIED]: "#6b7280", // gray-500
  [LeadStatus.CONVERTED]: "#8b5cf6", // purple-500
}

export function AdvancedClusterMarker({ cluster, onClusterClick }: AdvancedClusterMarkerProps) {
  const [isHovered, setIsHovered] = useState(false)

const handleClick = useCallback(() => {
    onClusterClick(cluster)
  }, [cluster, onClusterClick])

const { totalLeads, statusCounts, averagePotentialValue } = cluster.stats

// Calculate the size of the marker based on the number of points
  const getMarkerSize = () => {
    const baseSize = 40
    const sizeIncrement = Math.min(totalLeads, 100) / 5
    return baseSize + sizeIncrement
  }

const size = getMarkerSize()

// Create pie chart segments for status distribution
  const createPieChartSegments = () => {
    const segments: JSX.Element[] = []
    let startAngle = 0

// Calculate total for percentage
    const total = Object.values(statusCounts).reduce((sum, count) => sum + count, 0)

Object.entries(statusCounts).forEach(([status, count]) => {
      if (count === 0) return

const percentage = count / total
      const endAngle = startAngle + percentage * 360

// Create SVG path for the pie segment
      const x1 = Math.cos((startAngle * Math.PI) / 180) * 50 + 50
      const y1 = Math.sin((startAngle * Math.PI) / 180) * 50 + 50
      const x2 = Math.cos((endAngle * Math.PI) / 180) * 50 + 50
      const y2 = Math.sin((endAngle * Math.PI) / 180) * 50 + 50

const largeArcFlag = percentage > 0.5 ? 1 : 0

const pathData = [`M 50 50`, `L ${x1} ${y1}`, `A 50 50 0 ${largeArcFlag} 1 ${x2} ${y2}`, `Z`].join(" ")

segments.push(
        <path key={status} d={pathData} fill={statusColors[status as LeadStatus]} stroke="#ffffff" strokeWidth="1" />,
      )

startAngle = endAngle
    })

return segments
  }

return (
    <OverlayView
      position={new google.maps.LatLng(cluster.center.lat, cluster.center.lng)}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <div
        className={cn(
          "relative flex items-center justify-center rounded-full border-2 border-white shadow-md transition-all duration-200",
          isHovered ? "z-10 scale-110" : "z-0",
        )}
        style={{
          width: `${size}px`,
          height: `${size}px`,
          cursor: "pointer",
        }}
        onClick={handleClick}
        onMouseEnter={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        <svg viewBox="0 0 100 100" className="absolute inset-0 h-full w-full">
          {createPieChartSegments()}
          <circle cx="50" cy="50" r="40" fill="white" />
        </svg>

<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
          <span className="font-bold text-gray-900">{totalLeads}</span>
          {isHovered && totalLeads > 1 && (
            <div className="absolute -bottom-16 left-1/2 w-32 -translate-x-1/2 rounded bg-white p-1 text-xs shadow-lg">
              <div className="font-semibold">{formatCurrency(averagePotentialValue)}</div>
              <div className="text-gray-500">valor médio</div>
            </div>
          )}
        </div>
      </div>
    </OverlayView>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/map/cluster-details-panel.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useMemo } from "react"
import type { Cluster } from "../../services/lead-clustering-service"
import { LeadStatus } from "../../types/lead"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { X, ZoomIn, List } from "lucide-react"
import { formatCurrency } from "../../utils/format-utils"
import { ScrollArea } from "@/components/ui/scroll-area"
import { useRouter } from "next/navigation"

interface ClusterDetailsPanelProps {
  cluster: Cluster | null
  onClose: () => void
  onZoomToCluster: (cluster: Cluster) => void
}

// Status colors and labels
const statusConfig: Record<LeadStatus, { color: string; label: string }> = {
  [LeadStatus.NEW]: { color: "bg-blue-500", label: "Novo" },
  [LeadStatus.CONTACTED]: { color: "bg-yellow-500", label: "Contatado" },
  [LeadStatus.QUALIFIED]: { color: "bg-green-500", label: "Qualificado" },
  [LeadStatus.DISQUALIFIED]: { color: "bg-gray-500", label: "Desqualificado" },
  [LeadStatus.CONVERTED]: { color: "bg-purple-500", label: "Convertido" },
}

export function ClusterDetailsPanel({ cluster, onClose, onZoomToCluster }: ClusterDetailsPanelProps) {
  const router = useRouter()

// If no cluster is selected, don't render anything
  if (!cluster) return null

const { totalLeads, statusCounts, averagePotentialValue, tags } = cluster.stats

// Calculate the percentage for each status
  const statusPercentages = useMemo(() => {
    if (!cluster) return []
    return Object.entries(statusCounts).map(([status, count]) => ({
      status: status as LeadStatus,
      count,
      percentage: (count / totalLeads) * 100,
    }))
  }, [cluster, statusCounts, totalLeads])

// Get the top tags
  const topTags = useMemo(() => {
    if (!cluster) return []
    return Object.entries(tags)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([tag, count]) => ({
        tag,
        count,
        percentage: (count / totalLeads) * 100,
      }))
  }, [cluster, tags, totalLeads])

// Handle view lead details
  const handleViewLeadDetails = (leadId: string) => {
    router.push(`/sales/leads/${leadId}`)
  }

return (
    <Card className="absolute right-4 top-4 z-10 w-80 shadow-lg">
      <CardHeader className="pb-2">
        <div className="flex items-center justify-between">
          <CardTitle className="text-lg">Grupo de {totalLeads} Leads</CardTitle>
          <Button variant="ghost" size="icon" onClick={onClose} className="h-8 w-8">
            <X className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>

<CardContent className="space-y-4">
        {/* Summary stats */}
        <div className="grid grid-cols-2 gap-2">
          <div className="rounded-md bg-gray-100 p-2 text-center">
            <div className="text-sm text-gray-500">Valor Médio</div>
            <div className="text-lg font-semibold">{formatCurrency(averagePotentialValue)}</div>
          </div>
          <div className="rounded-md bg-gray-100 p-2 text-center">
            <div className="text-sm text-gray-500">Área</div>
            <div className="text-lg font-semibold">
              {(
                (cluster.bounds.north - cluster.bounds.south) *
                (cluster.bounds.east - cluster.bounds.west) *
                111 *
                111
              ).toFixed(1)}{" "}
              km²
            </div>
          </div>
        </div>

{/* Status distribution */}
        <div>
          <h4 className="mb-2 font-medium">Distribuição por Status</h4>
          <div className="space-y-2">
            {statusPercentages
              .filter((item) => item.count > 0)
              .sort((a, b) => b.count - a.count)
              .map((item) => (
                <div key={item.status} className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className={`h-3 w-3 rounded-full ${statusConfig[item.status].color}`} />
                    <span>{statusConfig[item.status].label}</span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-500">{item.count}</span>
                    <span className="text-sm font-medium">{item.percentage.toFixed(0)}%</span>
                  </div>
                </div>
              ))}
          </div>
        </div>

{/* Top tags */}
        {topTags.length > 0 && (
          <div>
            <h4 className="mb-2 font-medium">Tags Principais</h4>
            <div className="flex flex-wrap gap-1">
              {topTags.map((item) => (
                <Badge key={item.tag} variant="secondary" className="flex items-center gap-1">
                  {item.tag}
                  <span className="rounded-full bg-gray-200 px-1 text-xs">{item.count}</span>
                </Badge>
              ))}
            </div>
          </div>
        )}

{/* Actions */}
        <div className="flex gap-2">
          <Button variant="outline" size="sm" className="flex-1" onClick={() => onZoomToCluster(cluster)}>
            <ZoomIn className="mr-1 h-4 w-4" />
            Ampliar
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="flex-1"
            onClick={() => {
              // Navigate to a filtered list of these leads
              const leadIds = cluster.points.map((point) => point.lead.id).join(",")
              router.push(`/sales/leads?ids=${leadIds}`)
            }}
          >
            <List className="mr-1 h-4 w-4" />
            Ver Lista
          </Button>
        </div>

{/* Lead list */}
        <div>
          <h4 className="mb-2 font-medium">Leads neste Grupo</h4>
          <ScrollArea className="h-48">
            <div className="space-y-2 pr-4">
              {cluster.points.map((point) => (
                <div
                  key={point.lead.id}
                  className="flex cursor-pointer items-center justify-between rounded-md border p-2 hover:bg-gray-50"
                  onClick={() => handleViewLeadDetails(point.lead.id)}
                >
                  <div>
                    <div className="font-medium">{point.lead.name}</div>
                    <div className="text-xs text-gray-500">{point.lead.email}</div>
                  </div>
                  <div className={`h-2 w-2 rounded-full ${statusConfig[point.lead.status].color}`} />
                </div>
              ))}
            </div>
          </ScrollArea>
        </div>
      </CardContent>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/map/clustering-settings.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Settings } from "lucide-react"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import type { ClusteringOptions } from "../../services/lead-clustering-service"

interface ClusteringSettingsProps {
  options: ClusteringOptions
  onChange: (options: ClusteringOptions) => void
}

export function ClusteringSettings({ options, onChange }: ClusteringSettingsProps) {
  const [localOptions, setLocalOptions] = useState<ClusteringOptions>(options)

const handleChange = (key: keyof ClusteringOptions, value: number | boolean) => {
    const newOptions = { ...localOptions, [key]: value }
    setLocalOptions(newOptions)
    onChange(newOptions)
  }

return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline" size="sm" className="h-8 gap-1">
          <Settings className="h-4 w-4" />
          <span>Configurações de Agrupamento</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <div className="space-y-4">
          <h4 className="font-medium">Configurações de Agrupamento</h4>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="gridSize">Tamanho da Grade</Label>
              <span className="text-sm text-gray-500">{localOptions.gridSize}px</span>
            </div>
            <Slider
              id="gridSize"
              min={20}
              max={200}
              step={10}
              value={[localOptions.gridSize]}
              onValueChange={(value) => handleChange("gridSize", value[0])}
            />
            <p className="text-xs text-gray-500">
              Controla o tamanho das células de agrupamento. Valores maiores criam menos grupos.
            </p>
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="maxZoom">Zoom Máximo</Label>
              <span className="text-sm text-gray-500">{localOptions.maxZoom}</span>
            </div>
            <Slider
              id="maxZoom"
              min={10}
              max={20}
              step={1}
              value={[localOptions.maxZoom]}
              onValueChange={(value) => handleChange("maxZoom", value[0])}
            />
            <p className="text-xs text-gray-500">Nível de zoom a partir do qual os leads não serão mais agrupados.</p>
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="minClusterSize">Tamanho Mínimo do Grupo</Label>
              <span className="text-sm text-gray-500">{localOptions.minClusterSize} leads</span>
            </div>
            <Slider
              id="minClusterSize"
              min={2}
              max={10}
              step={1}
              value={[localOptions.minClusterSize]}
              onValueChange={(value) => handleChange("minClusterSize", value[0])}
            />
            <p className="text-xs text-gray-500">Número mínimo de leads para formar um grupo.</p>
          </div>

<div className="space-y-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="radiusMultiplier">Multiplicador de Raio</Label>
              <span className="text-sm text-gray-500">x{localOptions.radiusMultiplier.toFixed(1)}</span>
            </div>
            <Slider
              id="radiusMultiplier"
              min={0.5}
              max={3}
              step={0.1}
              value={[localOptions.radiusMultiplier]}
              onValueChange={(value) => handleChange("radiusMultiplier", value[0])}
            />
            <p className="text-xs text-gray-500">Controla o tamanho visual dos marcadores de grupo.</p>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/map/page.tsx"
import type { Metadata } from "next"
import { AdvancedLeadMap } from "@/modules/sales/components/map/advanced-lead-map"

export const metadata: Metadata = {
  title: "Mapa de Leads | Solar CRM",
  description: "Visualize a distribuição geográfica dos leads com agrupamento avançado",
}

export default function LeadMapPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Mapa de Leads</h1>
        <p className="text-gray-500">
          Visualize a distribuição geográfica dos leads com agrupamento avançado por proximidade
        </p>
      </div>

<AdvancedLeadMap />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/routes/page.tsx"
import { RouteMap } from "@/modules/sales/components/map/route-map"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Planejamento de Rotas | Solar CRM",
  description: "Planeje rotas otimizadas entre leads selecionados para visitas eficientes",
}

export default function RoutePlanningPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Planejamento de Rotas</h1>
        <p className="text-gray-500">Planeje rotas otimizadas entre leads selecionados para visitas eficientes</p>
      </div>

<RouteMap />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/leads/heatmap/page.tsx"
import { LeadHeatmap } from "@/modules/sales/components/map/lead-heatmap"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Mapa de Calor de Leads | Solar CRM",
  description: "Visualize a concentração de leads em um mapa de calor interativo",
}

export default function LeadHeatmapPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Mapa de Calor de Leads</h1>
        <p className="text-gray-500">
          Visualize a concentração geográfica dos leads em um mapa de calor interativo. Use os filtros para personalizar
          a visualização.
        </p>
      </div>

<LeadHeatmap />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/analytics/density/page.tsx"
import { LeadDensityAnalysis } from "@/modules/sales/components/analytics/lead-density-analysis"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Análise de Densidade de Leads | Solar CRM",
  description: "Analise a concentração e distribuição geográfica dos leads",
}

export default function LeadDensityAnalysisPage() {
  return (
    <div className="container mx-auto py-6">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">Análise de Densidade de Leads</h1>
        <p className="text-gray-500">
          Analise a concentração e distribuição geográfica dos leads para identificar áreas de alta densidade e
          potencial de mercado.
        </p>
      </div>

<LeadDensityAnalysis />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/sales/layout.tsx"
import type React from "react"
import { SalesProvider } from "@/modules/sales/contexts/sales-context"

export default function SalesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <SalesProvider>
      <div className="flex min-h-screen">
        <div className="flex-1">{children}</div>
      </div>
    </SalesProvider>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/types/sentiment-analysis.ts"
export type SentimentScore = {
  positive: number
  neutral: number
  negative: number
}

export type SentimentCategory = "positive" | "neutral" | "negative"

export type SentimentAnalysis = {
  id: string
  text: string
  score: SentimentScore
  category: SentimentCategory
  keywords: string[]
  entities: {
    name: string
    type: string
    sentiment: SentimentCategory
  }[]
  createdAt: string
}

export type CustomerFeedback = {
  id: string
  customerId: string
  customerName: string
  text: string
  source: "email" | "call" | "meeting" | "survey" | "social" | "other"
  category: "product" | "service" | "support" | "sales" | "installation" | "other"
  rating?: number
  sentiment?: SentimentAnalysis
  createdAt: string
  salesRepId?: string
  salesRepName?: string
  tags: string[]
  resolved: boolean
  resolvedAt?: string
  resolvedBy?: string
  followUpRequired: boolean
  followUpDate?: string
  followUpAssignedTo?: string
}

export type FeedbackFilter = {
  startDate?: string
  endDate?: string
  sentiment?: SentimentCategory
  source?: CustomerFeedback["source"]
  category?: CustomerFeedback["category"]
  resolved?: boolean
  followUpRequired?: boolean
  salesRepId?: string
  customerId?: string
  searchTerm?: string
  minRating?: number
  maxRating?: number
  tags?: string[]
}

export type SentimentTrend = {
  date: string
  positive: number
  neutral: number
  negative: number
  total: number
}

export type KeywordAnalysis = {
  keyword: string
  count: number
  sentiment: SentimentCategory
  score: number
}

export type CategorySentiment = {
  category: CustomerFeedback["category"]
  positive: number
  neutral: number
  negative: number
  total: number
  averageRating?: number
}

export type SentimentDashboardData = {
  overallSentiment: SentimentScore
  totalFeedback: number
  trends: SentimentTrend[]
  keywordAnalysis: KeywordAnalysis[]
  categorySentiment: CategorySentiment[]
  recentFeedback: CustomerFeedback[]
  needsAttention: CustomerFeedback[]
}
[V0_FILE]typescriptreact:file="modules/sales/services/sentiment-analysis-service.ts"
import type {
  CustomerFeedback,
  SentimentAnalysis,
  SentimentCategory,
  SentimentDashboardData,
  SentimentScore,
  SentimentTrend,
  KeywordAnalysis,
  CategorySentiment,
  FeedbackFilter,
} from "../types/sentiment-analysis"

class SentimentAnalysisService {
  private apiUrl = "/api/sales/sentiment"

async analyzeFeedback(text: string): Promise<SentimentAnalysis> {
    try {
      const response = await fetch(`${this.apiUrl}/analyze`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ text }),
      })

if (!response.ok) {
        throw new Error("Failed to analyze sentiment")
      }

return await response.json()
    } catch (error) {
      console.error("Error analyzing sentiment:", error)
      throw error
    }
  }

async submitFeedback(feedback: Omit<CustomerFeedback, "id" | "sentiment" | "createdAt">): Promise<CustomerFeedback> {
    try {
      const response = await fetch(`${this.apiUrl}/feedback`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(feedback),
      })

if (!response.ok) {
        throw new Error("Failed to submit feedback")
      }

return await response.json()
    } catch (error) {
      console.error("Error submitting feedback:", error)
      throw error
    }
  }

async getFeedback(id: string): Promise<CustomerFeedback> {
    try {
      const response = await fetch(`${this.apiUrl}/feedback/${id}`)

if (!response.ok) {
        throw new Error("Failed to get feedback")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting feedback:", error)
      throw error
    }
  }

async getFeedbackList(
    filter: FeedbackFilter,
    page = 1,
    limit = 10,
  ): Promise<{ data: CustomerFeedback[]; total: number; page: number; limit: number }> {
    try {
      const queryParams = new URLSearchParams()
      queryParams.append("page", page.toString())
      queryParams.append("limit", limit.toString())

Object.entries(filter).forEach(([key, value]) => {
        if (value !== undefined && value !== null) {
          if (Array.isArray(value)) {
            value.forEach((v) => queryParams.append(`${key}[]`, v))
          } else {
            queryParams.append(key, value.toString())
          }
        }
      })

const response = await fetch(`${this.apiUrl}/feedback?${queryParams.toString()}`)

if (!response.ok) {
        throw new Error("Failed to get feedback list")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting feedback list:", error)
      throw error
    }
  }

async updateFeedback(id: string, updates: Partial<CustomerFeedback>): Promise<CustomerFeedback> {
    try {
      const response = await fetch(`${this.apiUrl}/feedback/${id}`, {
        method: "PATCH",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(updates),
      })

if (!response.ok) {
        throw new Error("Failed to update feedback")
      }

return await response.json()
    } catch (error) {
      console.error("Error updating feedback:", error)
      throw error
    }
  }

async getDashboardData(filter: FeedbackFilter): Promise<SentimentDashboardData> {
    try {
      const queryParams = new URLSearchParams()

const response = await fetch(`${this.apiUrl}/dashboard?${queryParams.toString()}`)

if (!response.ok) {
        throw new Error("Failed to get dashboard data")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting dashboard data:", error)
      throw error
    }
  }

async getTrends(filter: FeedbackFilter, interval: "day" | "week" | "month" = "day"): Promise<SentimentTrend[]> {
    try {
      const queryParams = new URLSearchParams()
      queryParams.append("interval", interval)

const response = await fetch(`${this.apiUrl}/trends?${queryParams.toString()}`)

if (!response.ok) {
        throw new Error("Failed to get sentiment trends")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting sentiment trends:", error)
      throw error
    }
  }

async getKeywordAnalysis(filter: FeedbackFilter, limit = 20): Promise<KeywordAnalysis[]> {
    try {
      const queryParams = new URLSearchParams()
      queryParams.append("limit", limit.toString())

const response = await fetch(`${this.apiUrl}/keywords?${queryParams.toString()}`)

if (!response.ok) {
        throw new Error("Failed to get keyword analysis")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting keyword analysis:", error)
      throw error
    }
  }

async getCategorySentiment(filter: FeedbackFilter): Promise<CategorySentiment[]> {
    try {
      const queryParams = new URLSearchParams()

const response = await fetch(`${this.apiUrl}/categories?${queryParams.toString()}`)

if (!response.ok) {
        throw new Error("Failed to get category sentiment")
      }

return await response.json()
    } catch (error) {
      console.error("Error getting category sentiment:", error)
      throw error
    }
  }

getSentimentColor(sentiment: SentimentCategory): string {
    switch (sentiment) {
      case "positive":
        return "bg-green-500"
      case "neutral":
        return "bg-blue-500"
      case "negative":
        return "bg-red-500"
      default:
        return "bg-gray-500"
    }
  }

getSentimentIcon(sentiment: SentimentCategory): string {
    switch (sentiment) {
      case "positive":
        return "smile"
      case "neutral":
        return "meh"
      case "negative":
        return "frown"
      default:
        return "help-circle"
    }
  }

getSentimentLabel(sentiment: SentimentCategory): string {
    switch (sentiment) {
      case "positive":
        return "Positivo"
      case "neutral":
        return "Neutro"
      case "negative":
        return "Negativo"
      default:
        return "Desconhecido"
    }
  }

determineSentimentCategory(score: SentimentScore): SentimentCategory {
    if (score.positive > Math.max(score.neutral, score.negative)) {
      return "positive"
    } else if (score.negative > Math.max(score.positive, score.neutral)) {
      return "negative"
    } else {
      return "neutral"
    }
  }
}

export const sentimentAnalysisService = new SentimentAnalysisService()
[V0_FILE]typescriptreact:file="modules/sales/hooks/use-sentiment-analysis.ts"
"use client"

import { useState, useCallback } from "react"
import { sentimentAnalysisService } from "../services/sentiment-analysis-service"
import type {
  CustomerFeedback,
  FeedbackFilter,
  SentimentDashboardData,
  SentimentTrend,
  KeywordAnalysis,
  CategorySentiment,
} from "../types/sentiment-analysis"

export function useSentimentAnalysis() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [feedbackList, setFeedbackList] = useState<CustomerFeedback[]>([])
  const [totalFeedback, setTotalFeedback] = useState(0)
  const [currentPage, setCurrentPage] = useState(1)
  const [itemsPerPage, setItemsPerPage] = useState(10)
  const [dashboardData, setDashboardData] = useState<SentimentDashboardData | null>(null)
  const [trends, setTrends] = useState<SentimentTrend[]>([])
  const [keywordAnalysis, setKeywordAnalysis] = useState<KeywordAnalysis[]>([])
  const [categorySentiment, setCategorySentiment] = useState<CategorySentiment[]>([])

const analyzeFeedback = useCallback(async (text: string) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.analyzeFeedback(text)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to analyze sentiment")
      setIsLoading(false)
      throw err
    }
  }, [])

const submitFeedback = useCallback(async (feedback: Omit<CustomerFeedback, "id" | "sentiment" | "createdAt">) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.submitFeedback(feedback)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to submit feedback")
      setIsLoading(false)
      throw err
    }
  }, [])

const getFeedback = useCallback(async (id: string) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getFeedback(id)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get feedback")
      setIsLoading(false)
      throw err
    }
  }, [])

const getFeedbackList = useCallback(async (filter: FeedbackFilter, page = 1, limit = 10) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getFeedbackList(filter, page, limit)
      setFeedbackList(result.data)
      setTotalFeedback(result.total)
      setCurrentPage(result.page)
      setItemsPerPage(result.limit)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get feedback list")
      setIsLoading(false)
      throw err
    }
  }, [])

const updateFeedback = useCallback(async (id: string, updates: Partial<CustomerFeedback>) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.updateFeedback(id, updates)
      setIsLoading(false)

// Update the local list if the updated feedback is in it
      setFeedbackList((prev) => prev.map((item) => (item.id === id ? result : item)))

return result
    } catch (err) {
      setError("Failed to update feedback")
      setIsLoading(false)
      throw err
    }
  }, [])

const getDashboardData = useCallback(async (filter: FeedbackFilter) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getDashboardData(filter)
      setDashboardData(result)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get dashboard data")
      setIsLoading(false)
      throw err
    }
  }, [])

const getTrends = useCallback(async (filter: FeedbackFilter, interval: "day" | "week" | "month" = "day") => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getTrends(filter, interval)
      setTrends(result)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get sentiment trends")
      setIsLoading(false)
      throw err
    }
  }, [])

const getKeywordAnalysis = useCallback(async (filter: FeedbackFilter, limit = 20) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getKeywordAnalysis(filter, limit)
      setKeywordAnalysis(result)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get keyword analysis")
      setIsLoading(false)
      throw err
    }
  }, [])

const getCategorySentiment = useCallback(async (filter: FeedbackFilter) => {
    setIsLoading(true)
    setError(null)
    try {
      const result = await sentimentAnalysisService.getCategorySentiment(filter)
      setCategorySentiment(result)
      setIsLoading(false)
      return result
    } catch (err) {
      setError("Failed to get category sentiment")
      setIsLoading(false)
      throw err
    }
  }, [])

return {
    isLoading,
    error,
    feedbackList,
    totalFeedback,
    currentPage,
    itemsPerPage,
    dashboardData,
    trends,
    keywordAnalysis,
    categorySentiment,
    analyzeFeedback,
    submitFeedback,
    getFeedback,
    getFeedbackList,
    updateFeedback,
    getDashboardData,
    getTrends,
    getKeywordAnalysis,
    getCategorySentiment,
    getSentimentColor: sentimentAnalysisService.getSentimentColor,
    getSentimentIcon: sentimentAnalysisService.getSentimentIcon,
    getSentimentLabel: sentimentAnalysisService.getSentimentLabel,
  }
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/feedback-form.tsx"
"use client"

import { useState } from "react"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Loader2, Send } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import type { CustomerFeedback } from "../../types/sentiment-analysis"
import { useSentimentAnalysis } from "../../hooks/use-sentiment-analysis"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { useToast } from "@/hooks/use-toast"

const formSchema = z.object({
  customerName: z.string().min(2, { message: "O nome do cliente é obrigatório" }),
  customerId: z.string().optional(),
  text: z.string().min(10, { message: "O feedback deve ter pelo menos 10 caracteres" }),
  source: z.enum(["email", "call", "meeting", "survey", "social", "other"], {
    required_error: "Selecione a fonte do feedback",
  }),
  category: z.enum(["product", "service", "support", "sales", "installation", "other"], {
    required_error: "Selecione a categoria do feedback",
  }),
  rating: z.number().min(1).max(5).optional(),
  tags: z.string().optional(),
  salesRepId: z.string().optional(),
  salesRepName: z.string().optional(),
})

type FeedbackFormProps = {
  onSuccess?: (feedback: CustomerFeedback) => void
  initialData?: Partial<CustomerFeedback>
  customerId?: string
  customerName?: string
  salesRepId?: string
  salesRepName?: string
}

export function FeedbackForm({
  onSuccess,
  initialData,
  customerId,
  customerName,
  salesRepId,
  salesRepName,
}: FeedbackFormProps) {
  const { submitFeedback, analyzeFeedback } = useSentimentAnalysis()
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [sentimentPreview, setSentimentPreview] = useState<{ category: string; score: number } | null>(null)
  const { toast } = useToast()

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      customerName: initialData?.customerName || customerName || "",
      customerId: initialData?.customerId || customerId || "",
      text: initialData?.text || "",
      source: (initialData?.source as any) || "survey",
      category: (initialData?.category as any) || "product",
      rating: initialData?.rating || 5,
      tags: initialData?.tags?.join(", ") || "",
      salesRepId: initialData?.salesRepId || salesRepId || "",
      salesRepName: initialData?.salesRepName || salesRepName || "",
    },
  })

const handleTextChange = async (text: string) => {
    if (text.length > 30) {
      try {
        const analysis = await analyzeFeedback(text)
        setSentimentPreview({
          category: analysis.category,
          score: analysis.score[analysis.category],
        })
      } catch (error) {
        console.error("Error analyzing sentiment:", error)
      }
    }
  }

const onSubmit = async (values: z.infer<typeof formSchema>) => {
    setIsSubmitting(true)
    try {
      const tagsArray = values.tags
        ? values.tags
            .split(",")
            .map((tag) => tag.trim())
            .filter(Boolean)
        : []

const feedbackData: Omit<CustomerFeedback, "id" | "sentiment" | "createdAt"> = {
        customerName: values.customerName,
        customerId: values.customerId || "",
        text: values.text,
        source: values.source,
        category: values.category,
        rating: values.rating,
        tags: tagsArray,
        salesRepId: values.salesRepId || undefined,
        salesRepName: values.salesRepName || undefined,
        resolved: false,
        followUpRequired: false,
      }

const result = await submitFeedback(feedbackData)

toast({
        title: "Feedback enviado",
        description: "O feedback do cliente foi registrado com sucesso.",
      })

form.reset()
      setSentimentPreview(null)

if (onSuccess) {
        onSuccess(result)
      }
    } catch (error) {
      console.error("Error submitting feedback:", error)
      toast({
        title: "Erro",
        description: "Ocorreu um erro ao enviar o feedback. Tente novamente.",
        variant: "destructive",
      })
    } finally {
      setIsSubmitting(false)
    }
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="customerName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Nome do Cliente</FormLabel>
                <FormControl>
                  <Input placeholder="Nome do cliente" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="customerId"
            render={({ field }) => (
              <FormItem>
                <FormLabel>ID do Cliente (opcional)</FormLabel>
                <FormControl>
                  <Input placeholder="ID do cliente" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="source"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Fonte do Feedback</FormLabel>
                <Select onValueChange={field.onChange} defaultValue={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione a fonte" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="email">Email</SelectItem>
                    <SelectItem value="call">Ligação</SelectItem>
                    <SelectItem value="meeting">Reunião</SelectItem>
                    <SelectItem value="survey">Pesquisa</SelectItem>
                    <SelectItem value="social">Redes Sociais</SelectItem>
                    <SelectItem value="other">Outro</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="category"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Categoria</FormLabel>
                <Select onValueChange={field.onChange} defaultValue={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Selecione a categoria" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="product">Produto</SelectItem>
                    <SelectItem value="service">Serviço</SelectItem>
                    <SelectItem value="support">Suporte</SelectItem>
                    <SelectItem value="sales">Vendas</SelectItem>
                    <SelectItem value="installation">Instalação</SelectItem>
                    <SelectItem value="other">Outro</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<FormField
          control={form.control}
          name="text"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Feedback</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Digite o feedback do cliente aqui..."
                  className="min-h-[120px]"
                  {...field}
                  onChange={(e) => {
                    field.onChange(e)
                    handleTextChange(e.target.value)
                  }}
                />
              </FormControl>
              <FormDescription>Descreva o feedback do cliente em detalhes.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

{sentimentPreview && (
          <Alert
            className={`${
              sentimentPreview.category === "positive"
                ? "bg-green-50 border-green-200"
                : sentimentPreview.category === "negative"
                  ? "bg-red-50 border-red-200"
                  : "bg-blue-50 border-blue-200"
            }`}
          >
            <AlertTitle>Análise de Sentimento Preliminar</AlertTitle>
            <AlertDescription>
              Este feedback parece ter um tom{" "}
              {sentimentPreview.category === "positive"
                ? "positivo"
                : sentimentPreview.category === "negative"
                  ? "negativo"
                  : "neutro"}{" "}
              (confiança: {Math.round(sentimentPreview.score * 100)}%).
            </AlertDescription>
          </Alert>
        )}

<FormField
          control={form.control}
          name="rating"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Avaliação (1-5)</FormLabel>
              <FormControl>
                <div className="flex items-center space-x-2">
                  {[1, 2, 3, 4, 5].map((rating) => (
                    <Button
                      key={rating}
                      type="button"
                      variant={field.value === rating ? "default" : "outline"}
                      size="sm"
                      onClick={() => field.onChange(rating)}
                      className="w-10 h-10 rounded-full"
                    >
                      {rating}
                    </Button>
                  ))}
                </div>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="tags"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Tags (separadas por vírgula)</FormLabel>
              <FormControl>
                <Input placeholder="ex: urgente, follow-up, importante" {...field} />
              </FormControl>
              <FormDescription>Adicione tags para categorizar o feedback.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="salesRepName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Representante de Vendas (opcional)</FormLabel>
                <FormControl>
                  <Input placeholder="Nome do representante" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="salesRepId"
            render={({ field }) => (
              <FormItem>
                <FormLabel>ID do Representante (opcional)</FormLabel>
                <FormControl>
                  <Input placeholder="ID do representante" {...field} />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />
        </div>

<Button type="submit" className="w-full" disabled={isSubmitting}>
          {isSubmitting ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Enviando...
            </>
          ) : (
            <>
              <Send className="mr-2 h-4 w-4" />
              Enviar Feedback
            </>
          )}
        </Button>
      </form>
    </Form>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/feedback-card.tsx" isFixed="true"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import { ThumbsUp, ThumbsDown, Meh, Tag, CheckCircle, AlertCircle, MoreVertical } from "lucide-react"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import type { CustomerFeedback, SentimentCategory } from "../../types/sentiment-analysis"
import { useSentimentAnalysis } from "../../hooks/use-sentiment-analysis"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"

type FeedbackCardProps = {
  feedback: CustomerFeedback
  onUpdate?: (id: string, updates: Partial<CustomerFeedback>) => void
  onView?: (feedback: CustomerFeedback) => void
}

export function FeedbackCard({ feedback, onUpdate, onView }: FeedbackCardProps) {
  const { getSentimentColor, getSentimentIcon, getSentimentLabel } = useSentimentAnalysis()
  const [isUpdating, setIsUpdating] = useState(false)

const handleResolve = async () => {
    if (!onUpdate || isUpdating) return

setIsUpdating(true)
    try {
      await onUpdate(feedback.id, {
        resolved: !feedback.resolved,
        resolvedAt: !feedback.resolved ? new Date().toISOString() : undefined,
      })
    } catch (error) {
      console.error("Error updating feedback:", error)
    } finally {
      setIsUpdating(false)
    }
  }

const handleFollowUp = async () => {
    if (!onUpdate || isUpdating) return

setIsUpdating(true)
    try {
      await onUpdate(feedback.id, {
        followUpRequired: !feedback.followUpRequired,
        followUpDate: !feedback.followUpRequired ? new Date().toISOString() : undefined,
      })
    } catch (error) {
      console.error("Error updating feedback:", error)
    } finally {
      setIsUpdating(false)
    }
  }

const getFeedbackSentimentIcon = (sentiment?: SentimentCategory) => {
    if (!sentiment) return <Meh className="h-5 w-5" />

switch (sentiment) {
      case "positive":
        return <ThumbsUp className="h-5 w-5 text-green-500" />
      case "negative":
        return <ThumbsDown className="h-5 w-5 text-red-500" />
      case "neutral":
        return <Meh className="h-5 w-5 text-blue-500" />
      default:
        return <Meh className="h-5 w-5" />
    }
  }

const formatDate = (dateString?: string) => {
    if (!dateString) return ""
    return format(new Date(dateString), "dd MMM yyyy, HH:mm", { locale: ptBR })
  }

return (
    <Card className="w-full">
      <CardHeader className="pb-2">
        <div className="flex justify-between items-start">
          <div>
            <CardTitle className="text-lg">{feedback.customerName}</CardTitle>
            <CardDescription>
              {formatDate(feedback.createdAt)}
              {feedback.salesRepName && ` • Atendido por: ${feedback.salesRepName}`}
            </CardDescription>
          </div>
          <div className="flex items-center space-x-2">
            {feedback.sentiment && (
              <TooltipProvider>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <Badge
                      variant="outline"
                      className={`${
                        feedback.sentiment.category === "positive"
                          ? "bg-green-100 text-green-800 border-green-300"
                          : feedback.sentiment.category === "negative"
                            ? "bg-red-100 text-red-800 border-red-300"
                            : "bg-blue-100 text-blue-800 border-blue-300"
                      }`}
                    >
                      <span className="flex items-center">
                        {getFeedbackSentimentIcon(feedback.sentiment.category)}
                        <span className="ml-1">{getSentimentLabel(feedback.sentiment.category)}</span>
                      </span>
                    </Badge>
                  </TooltipTrigger>
                  <TooltipContent>
                    <p>Positivo: {Math.round(feedback.sentiment.score.positive * 100)}%</p>
                    <p>Neutro: {Math.round(feedback.sentiment.score.neutral * 100)}%</p>
                    <p>Negativo: {Math.round(feedback.sentiment.score.negative * 100)}%</p>
                  </TooltipContent>
                </Tooltip>
              </TooltipProvider>
            )}

<DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" size="sm">
                  <MoreVertical className="h-4 w-4" />
                </Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => onView?.(feedback)}>Ver detalhes</DropdownMenuItem>
                <DropdownMenuItem onClick={handleResolve}>
                  {feedback.resolved ? "Marcar como não resolvido" : "Marcar como resolvido"}
                </DropdownMenuItem>
                <DropdownMenuItem onClick={handleFollowUp}>
                  {feedback.followUpRequired ? "Remover follow-up" : "Adicionar follow-up"}
                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </CardHeader>
      <CardContent>
        <div className="flex items-center space-x-2 mb-2">
          <Badge variant="outline" className="bg-gray-100">
            {feedback.source === "email"
              ? "Email"
              : feedback.source === "call"
                ? "Ligação"
                : feedback.source === "meeting"
                  ? "Reunião"
                  : feedback.source === "survey"
                    ? "Pesquisa"
                    : feedback.source === "social"
                      ? "Redes Sociais"
                      : "Outro"}
          </Badge>
          <Badge variant="outline" className="bg-gray-100">
            {feedback.category === "product"
              ? "Produto"
              : feedback.category === "service"
                ? "Serviço"
                : feedback.category === "support"
                  ? "Suporte"
                  : feedback.category === "sales"
                    ? "Vendas"
                    : feedback.category === "installation"
                      ? "Instalação"
                      : "Outro"}
          </Badge>
          {feedback.rating && (
            <Badge
              variant="outline"
              className={`
              ${
                feedback.rating >= 4
                  ? "bg-green-100 text-green-800"
                  : feedback.rating <= 2
                    ? "bg-red-100 text-red-800"
                    : "bg-yellow-100 text-yellow-800"
              }
            `}
            >
              {feedback.rating}/5
            </Badge>
          )}
        </div>

<p className="text-gray-700 whitespace-pre-line">{feedback.text}</p>

{feedback.sentiment?.keywords && feedback.sentiment.keywords.length > 0 && (
          <div className="mt-3 flex flex-wrap gap-1">
            {feedback.sentiment.keywords.map((keyword, index) => (
              <Badge key={index} variant="secondary" className="text-xs">
                {keyword}
              </Badge>
            ))}
          </div>
        )}
      </CardContent>
      <CardFooter className="pt-0 flex justify-between items-center">
        <div className="flex flex-wrap gap-1">
          {feedback.tags.map((tag, index) => (
            <Badge key={index} variant="outline" className="text-xs flex items-center">
              <Tag className="h-3 w-3 mr-1" />
              {tag}
            </Badge>
          ))}
        </div>

<div className="flex items-center space-x-2">
          {feedback.resolved && (
            <Badge variant="outline" className="bg-green-100 text-green-800 border-green-300">
              <CheckCircle className="h-3 w-3 mr-1" />
              Resolvido
            </Badge>
          )}

{feedback.followUpRequired && (
            <Badge variant="outline" className="bg-yellow-100 text-yellow-800 border-yellow-300">
              <AlertCircle className="h-3 w-3 mr-1" />
              Follow-up
            </Badge>
          )}
        </div>
      </CardFooter>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/feedback-list.tsx"
"use client"

import { useState, useEffect } from "react"
import { Loader2, Filter, RefreshCw } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { CustomerFeedback, FeedbackFilter } from "../../types/sentiment-analysis"
import { useSentimentAnalysis } from "../../hooks/use-sentiment-analysis"
import { FeedbackCard } from "./feedback-card"
import { FeedbackFilterForm } from "./feedback-filter-form"
import { FeedbackDetailModal } from "./feedback-detail-modal"
import { Pagination } from "../../components/common/pagination"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"

export function FeedbackList() {
  const { isLoading, error, feedbackList, totalFeedback, currentPage, itemsPerPage, getFeedbackList, updateFeedback } =
    useSentimentAnalysis()
  const [filter, setFilter] = useState<FeedbackFilter>({})
  const [isFilterOpen, setIsFilterOpen] = useState(false)
  const [selectedFeedback, setSelectedFeedback] = useState<CustomerFeedback | null>(null)

useEffect(() => {
    loadFeedback()
  }, [])

const loadFeedback = async (page = 1) => {
    try {
      await getFeedbackList(filter, page, itemsPerPage)
    } catch (error) {
      console.error("Error loading feedback:", error)
    }
  }

const handleFilterChange = (newFilter: FeedbackFilter) => {
    setFilter(newFilter)
    loadFeedback(1)
    setIsFilterOpen(false)
  }

const handlePageChange = (page: number) => {
    loadFeedback(page)
  }

const handleUpdateFeedback = async (id: string, updates: Partial<CustomerFeedback>) => {
    try {
      await updateFeedback(id, updates)

// If we're viewing the details of the updated feedback, update the selected feedback
      if (selectedFeedback && selectedFeedback.id === id) {
        setSelectedFeedback((prev) => (prev ? { ...prev, ...updates } : null))
      }
    } catch (error) {
      console.error("Error updating feedback:", error)
    }
  }

const handleViewFeedback = (feedback: CustomerFeedback) => {
    setSelectedFeedback(feedback)
  }

const handleCloseDetailModal = () => {
    setSelectedFeedback(null)
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Feedback de Clientes</h2>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={() => loadFeedback(currentPage)}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Atualizar
          </Button>

<Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
            <SheetTrigger asChild>
              <Button variant="outline" size="sm">
                <Filter className="h-4 w-4 mr-2" />
                Filtrar
              </Button>
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>Filtrar Feedback</SheetTitle>
              </SheetHeader>
              <div className="py-4">
                <FeedbackFilterForm initialFilter={filter} onFilterChange={handleFilterChange} />
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTitle>Erro</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{isLoading ? (
        <div className="flex justify-center items-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      ) : feedbackList.length === 0 ? (
        <div className="text-center py-12 border rounded-lg bg-gray-50">
          <p className="text-gray-500">Nenhum feedback encontrado.</p>
          <p className="text-gray-400 text-sm mt-1">Tente ajustar os filtros ou adicionar novos feedbacks.</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4">
          {feedbackList.map((feedback) => (
            <FeedbackCard
              key={feedback.id}
              feedback={feedback}
              onUpdate={handleUpdateFeedback}
              onView={handleViewFeedback}
            />
          ))}
        </div>
      )}

{totalFeedback > itemsPerPage && (
        <Pagination
          currentPage={currentPage}
          totalItems={totalFeedback}
          pageSize={itemsPerPage}
          onPageChange={handlePageChange}
        />
      )}

{selectedFeedback && (
        <FeedbackDetailModal
          feedback={selectedFeedback}
          onClose={handleCloseDetailModal}
          onUpdate={handleUpdateFeedback}
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/feedback-filter-form.tsx" isFixed="true" isQuickEdit="true"
"use client"

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Search, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormField, FormItem, FormLabel } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { DateRangePicker } from "@/components/ui/date-range-picker"
import type { FeedbackFilter, SentimentCategory } from "../../types/sentiment-analysis"

const formSchema = z.object({
  startDate: z.date().optional(),
  endDate: z.date().optional(),
  sentiment: z.string().optional(),
  source: z.string().optional(),
  category: z.string().optional(),
  resolved: z.boolean().optional(),
  followUpRequired: z.boolean().optional(),
  searchTerm: z.string().optional(),
  minRating: z.string().optional(),
  maxRating: z.string().optional(),
  tags: z.string().optional(),
})

type FeedbackFilterFormProps = {
  initialFilter?: FeedbackFilter
  onFilterChange: (filter: FeedbackFilter) => void
}

// Define the CustomerFeedback type
interface CustomerFeedback {
  source: string
  category: string
}

export function FeedbackFilterForm({ initialFilter = {}, onFilterChange }: FeedbackFilterFormProps) {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      startDate: initialFilter.startDate ? new Date(initialFilter.startDate) : undefined,
      endDate: initialFilter.endDate ? new Date(initialFilter.endDate) : undefined,
      sentiment: initialFilter.sentiment || "",
      source: initialFilter.source || "",
      category: initialFilter.category || "",
      resolved: initialFilter.resolved || false,
      followUpRequired: initialFilter.followUpRequired || false,
      searchTerm: initialFilter.searchTerm || "",
      minRating: initialFilter.minRating?.toString() || "",
      maxRating: initialFilter.maxRating?.toString() || "",
      tags: initialFilter.tags?.join(", ") || "",
    },
  })

const onSubmit = (values: z.infer<typeof formSchema>) => {
    const filter: FeedbackFilter = {}

if (values.startDate) filter.startDate = values.startDate.toISOString()
    if (values.endDate) filter.endDate = values.endDate.toISOString()
    if (values.sentiment) filter.sentiment = values.sentiment as SentimentCategory
    if (values.source) filter.source = values.source as CustomerFeedback["source"]
    if (values.category) filter.category = values.category as CustomerFeedback["category"]
    if (values.resolved) filter.resolved = values.resolved
    if (values.followUpRequired) filter.followUpRequired = values.followUpRequired
    if (values.searchTerm) filter.searchTerm = values.searchTerm
    if (values.minRating) filter.minRating = Number.parseInt(values.minRating)
    if (values.maxRating) filter.maxRating = Number.parseInt(values.maxRating)
    if (values.tags) {
      filter.tags = values.tags
        .split(",")
        .map((tag) => tag.trim())
        .filter(Boolean)
    }

onFilterChange(filter)
  }

const handleReset = () => {
    form.reset({
      startDate: undefined,
      endDate: undefined,
      sentiment: "",
      source: "",
      category: "",
      resolved: false,
      followUpRequired: false,
      searchTerm: "",
      minRating: "",
      maxRating: "",
      tags: "",
    })

onFilterChange({})
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormField
          control={form.control}
          name="searchTerm"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Buscar</FormLabel>
              <FormControl>
                <div className="relative">
                  <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input placeholder="Buscar em feedback..." className="pl-8" {...field} />
                </div>
              </FormControl>
            </FormItem>
          )}
        />

<FormField
          control={form.control}
          name="sentiment"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Sentimento</FormLabel>
              <Select onValueChange={field.onChange} value={field.value}>
                <FormControl>
                  <SelectTrigger>
                    <SelectValue placeholder="Todos os sentimentos" />
                  </SelectTrigger>
                </FormControl>
                <SelectContent>
                  <SelectItem value="all">Todos os sentimentos</SelectItem>
                  <SelectItem value="positive">Positivo</SelectItem>
                  <SelectItem value="neutral">Neutro</SelectItem>
                  <SelectItem value="negative">Negativo</SelectItem>
                </SelectContent>
              </Select>
            </FormItem>
          )}
        />

<div className="grid grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="source"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Fonte</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Todas as fontes" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="">Todas as fontes</SelectItem>
                    <SelectItem value="email">Email</SelectItem>
                    <SelectItem value="call">Ligação</SelectItem>
                    <SelectItem value="meeting">Reunião</SelectItem>
                    <SelectItem value="survey">Pesquisa</SelectItem>
                    <SelectItem value="social">Redes Sociais</SelectItem>
                    <SelectItem value="other">Outro</SelectItem>
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="category"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Categoria</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Todas as categorias" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="">Todas as categorias</SelectItem>
                    <SelectItem value="product">Produto</SelectItem>
                    <SelectItem value="service">Serviço</SelectItem>
                    <SelectItem value="support">Suporte</SelectItem>
                    <SelectItem value="sales">Vendas</SelectItem>
                    <SelectItem value="installation">Instalação</SelectItem>
                    <SelectItem value="other">Outro</SelectItem>
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />
        </div>

<div className="grid grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="minRating"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Avaliação Mínima</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Qualquer" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="">Qualquer</SelectItem>
                    <SelectItem value="1">1</SelectItem>
                    <SelectItem value="2">2</SelectItem>
                    <SelectItem value="3">3</SelectItem>
                    <SelectItem value="4">4</SelectItem>
                    <SelectItem value="5">5</SelectItem>
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="maxRating"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Avaliação Máxima</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Qualquer" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="">Qualquer</SelectItem>
                    <SelectItem value="1">1</SelectItem>
                    <SelectItem value="2">2</SelectItem>
                    <SelectItem value="3">3</SelectItem>
                    <SelectItem value="4">4</SelectItem>
                    <SelectItem value="5">5</SelectItem>
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />
        </div>

<div className="grid grid-cols-2 gap-4">
          <FormField
            control={form.control}
            name="resolved"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <FormLabel>Resolvido</FormLabel>
                </div>
                <FormControl>
                  <Switch checked={field.value} onCheckedChange={field.onChange} />
                </FormControl>
              </FormItem>
            )}
          />

<FormField
            control={form.control}
            name="followUpRequired"
            render={({ field }) => (
              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
                <div className="space-y-0.5">
                  <FormLabel>Requer Follow-up</FormLabel>
                </div>
                <FormControl>
                  <Switch checked={field.value} onCheckedChange={field.onChange} />
                </FormControl>
              </FormItem>
            )}
          />
        </div>

<FormField
          control={form.control}
          name="startDate"
          render={({ field }) => (
            <FormItem className="flex flex-col">
              <FormLabel>Período</FormLabel>
              <DateRangePicker
                from={field.value}
                to={form.getValues().endDate}
                onFromChange={field.onChange}
                onToChange={(date) => form.setValue("endDate", date)}
              />
            </FormItem>
          )}
        />

<div className="flex justify-between">
          <Button type="button" variant="outline" onClick={handleReset}>
            <X className="mr-2 h-4 w-4" />
            Limpar Filtros
          </Button>
          <Button type="submit">
            <Search className="mr-2 h-4 w-4" />
            Aplicar Filtros
          </Button>
        </div>
      </form>
    </Form>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/feedback-detail-modal.tsx"
"use client"

import { useState } from "react"
import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import {
  X,
  ThumbsUp,
  ThumbsDown,
  Meh,
  Tag,
  Calendar,
  CheckCircle,
  AlertCircle,
  Edit,
  Save,
  Loader2,
} from "lucide-react"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import type { CustomerFeedback, SentimentCategory } from "../../types/sentiment-analysis"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"

type FeedbackDetailModalProps = {
  feedback: CustomerFeedback
  onClose: () => void
  onUpdate?: (id: string, updates: Partial<CustomerFeedback>) => void
}

export function FeedbackDetailModal({ feedback, onClose, onUpdate }: FeedbackDetailModalProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [notes, setNotes] = useState(feedback.notes || "")
  const [isUpdating, setIsUpdating] = useState(false)

const handleSaveNotes = async () => {
    if (!onUpdate || isUpdating) return

setIsUpdating(true)
    try {
      await onUpdate(feedback.id, { notes })
      setIsEditing(false)
    } catch (error) {
      console.error("Error updating feedback notes:", error)
    } finally {
      setIsUpdating(false)
    }
  }

const handleResolve = async () => {
    if (!onUpdate || isUpdating) return

const handleFollowUp = async () => {
    if (!onUpdate || isUpdating) return

const getSentimentIcon = (sentiment?: SentimentCategory) => {
    if (!sentiment) return <Meh className="h-5 w-5" />

const formatDate = (dateString?: string) => {
    if (!dateString) return ""
    return format(new Date(dateString), "dd MMM yyyy, HH:mm", { locale: ptBR })
  }

return (
    <Dialog open={true} onOpenChange={() => onClose()}>
      <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-xl">Detalhes do Feedback</DialogTitle>
        </DialogHeader>

<Tabs defaultValue="details">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="details">Detalhes</TabsTrigger>
            <TabsTrigger value="sentiment">Análise de Sentimento</TabsTrigger>
            <TabsTrigger value="notes">Notas e Ações</TabsTrigger>
          </TabsList>

<TabsContent value="details" className="space-y-4 mt-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <h3 className="text-sm font-medium text-gray-500">Cliente</h3>
                <p className="text-base font-medium">{feedback.customerName}</p>
                {feedback.customerId && <p className="text-sm text-gray-500">ID: {feedback.customerId}</p>}
              </div>

<div>
                <h3 className="text-sm font-medium text-gray-500">Data</h3>
                <p className="text-base">{formatDate(feedback.createdAt)}</p>
              </div>
            </div>

<div>
              <h3 className="text-sm font-medium text-gray-500 mb-1">Feedback</h3>
              <div className="p-3 bg-gray-50 rounded-md whitespace-pre-line">{feedback.text}</div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div>
                <h3 className="text-sm font-medium text-gray-500">Fonte</h3>
                <Badge variant="outline" className="mt-1">
                  {feedback.source === "email"
                    ? "Email"
                    : feedback.source === "call"
                      ? "Ligação"
                      : feedback.source === "meeting"
                        ? "Reunião"
                        : feedback.source === "survey"
                          ? "Pesquisa"
                          : feedback.source === "social"
                            ? "Redes Sociais"
                            : "Outro"}
                </Badge>
              </div>

<div>
                <h3 className="text-sm font-medium text-gray-500">Categoria</h3>
                <Badge variant="outline" className="mt-1">
                  {feedback.category === "product"
                    ? "Produto"
                    : feedback.category === "service"
                      ? "Serviço"
                      : feedback.category === "support"
                        ? "Suporte"
                        : feedback.category === "sales"
                          ? "Vendas"
                          : feedback.category === "installation"
                            ? "Instalação"
                            : "Outro"}
                </Badge>
              </div>
            </div>

{feedback.rating && (
              <div>
                <h3 className="text-sm font-medium text-gray-500">Avaliação</h3>
                <div className="flex items-center mt-1">
                  {[1, 2, 3, 4, 5].map((star) => (
                    <div
                      key={star}
                      className={`w-8 h-8 flex items-center justify-center rounded-full mr-1 ${
                        star <= feedback.rating! ? "bg-yellow-100 text-yellow-600" : "bg-gray-100 text-gray-400"
                      }`}
                    >
                      {star}
                    </div>
                  ))}
                  <span className="ml-2 text-lg font-medium">{feedback.rating}/5</span>
                </div>
              </div>
            )}

{feedback.tags.length > 0 && (
              <div>
                <h3 className="text-sm font-medium text-gray-500">Tags</h3>
                <div className="flex flex-wrap gap-1 mt-1">
                  {feedback.tags.map((tag, index) => (
                    <Badge key={index} variant="secondary">
                      <Tag className="h-3 w-3 mr-1" />
                      {tag}
                    </Badge>
                  ))}
                </div>
              </div>
            )}

{feedback.salesRepName && (
              <div>
                <h3 className="text-sm font-medium text-gray-500">Representante de Vendas</h3>
                <p className="text-base">{feedback.salesRepName}</p>
                {feedback.salesRepId && <p className="text-sm text-gray-500">ID: {feedback.salesRepId}</p>}
              </div>
            )}

<div className="grid grid-cols-2 gap-4">
              <div>
                <h3 className="text-sm font-medium text-gray-500">Status</h3>
                <Badge
                  variant="outline"
                  className={`mt-1 ${
                    feedback.resolved
                      ? "bg-green-100 text-green-800 border-green-300"
                      : "bg-yellow-100 text-yellow-800 border-yellow-300"
                  }`}
                >
                  {feedback.resolved ? (
                    <>
                      <CheckCircle className="h-3 w-3 mr-1" />
                      Resolvido {feedback.resolvedAt && `em ${formatDate(feedback.resolvedAt)}`}
                    </>
                  ) : (
                    <>
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Não Resolvido
                    </>
                  )}
                </Badge>
              </div>

<div>
                <h3 className="text-sm font-medium text-gray-500">Follow-up</h3>
                <Badge
                  variant="outline"
                  className={`mt-1 ${
                    feedback.followUpRequired
                      ? "bg-blue-100 text-blue-800 border-blue-300"
                      : "bg-gray-100 text-gray-800 border-gray-300"
                  }`}
                >
                  {feedback.followUpRequired ? (
                    <>
                      <Calendar className="h-3 w-3 mr-1" />
                      Requer Follow-up {feedback.followUpDate && `em ${formatDate(feedback.followUpDate)}`}
                    </>
                  ) : (
                    "Não Requer Follow-up"
                  )}
                </Badge>
              </div>
            </div>
          </TabsContent>

<TabsContent value="sentiment" className="space-y-4 mt-4">
            {feedback.sentiment ? (
              <>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-lg">Análise de Sentimento</CardTitle>
                    <CardDescription>Análise automática do sentimento do feedback</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex items-center mb-4">
                      <div
                        className={`p-3 rounded-full mr-3 ${
                          feedback.sentiment.category === "positive"
                            ? "bg-green-100"
                            : feedback.sentiment.category === "negative"
                              ? "bg-red-100"
                              : "bg-blue-100"
                        }`}
                      >
                        {getSentimentIcon(feedback.sentiment.category)}
                      </div>
                      <div>
                        <h3 className="font-medium">
                          Sentimento{" "}
                          {feedback.sentiment.category === "positive"
                            ? "Positivo"
                            : feedback.sentiment.category === "negative"
                              ? "Negativo"
                              : "Neutro"}
                        </h3>
                        <p className="text-sm text-gray-500">
                          Confiança: {Math.round(feedback.sentiment.score[feedback.sentiment.category] * 100)}%
                        </p>
                      </div>
                    </div>

<div className="space-y-3">
                      <div>
                        <div className="flex justify-between text-sm mb-1">
                          <span>Positivo</span>
                          <span>{Math.round(feedback.sentiment.score.positive * 100)}%</span>
                        </div>
                        <Progress
                          value={feedback.sentiment.score.positive * 100}
                          className="h-2 bg-gray-100"
                          indicatorClassName="bg-green-500"
                        />
                      </div>

<div>
                        <div className="flex justify-between text-sm mb-1">
                          <span>Neutro</span>
                          <span>{Math.round(feedback.sentiment.score.neutral * 100)}%</span>
                        </div>
                        <Progress
                          value={feedback.sentiment.score.neutral * 100}
                          className="h-2 bg-gray-100"
                          indicatorClassName="bg-blue-500"
                        />
                      </div>

<div>
                        <div className="flex justify-between text-sm mb-1">
                          <span>Negativo</span>
                          <span>{Math.round(feedback.sentiment.score.negative * 100)}%</span>
                        </div>
                        <Progress
                          value={feedback.sentiment.score.negative * 100}
                          className="h-2 bg-gray-100"
                          indicatorClassName="bg-red-500"
                        />
                      </div>
                    </div>
                  </CardContent>
                </Card>

{feedback.sentiment.keywords && feedback.sentiment.keywords.length > 0 && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg">Palavras-chave Detectadas</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-wrap gap-2">
                        {feedback.sentiment.keywords.map((keyword, index) => (
                          <Badge key={index} variant="secondary">
                            {keyword}
                          </Badge>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}

{feedback.sentiment.entities && feedback.sentiment.entities.length > 0 && (
                  <Card>
                    <CardHeader className="pb-2">
                      <CardTitle className="text-lg">Entidades Detectadas</CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-2">
                        {feedback.sentiment.entities.map((entity, index) => (
                          <div key={index} className="flex items-center justify-between p-2 border rounded-md">
                            <div>
                              <span className="font-medium">{entity.name}</span>
                              <span className="text-sm text-gray-500 ml-2">({entity.type})</span>
                            </div>
                            <Badge
                              variant="outline"
                              className={`
                              ${
                                entity.sentiment === "positive"
                                  ? "bg-green-100 text-green-800"
                                  : entity.sentiment === "negative"
                                    ? "bg-red-100 text-red-800"
                                    : "bg-blue-100 text-blue-800"
                              }
                            `}
                            >
                              {entity.sentiment === "positive"
                                ? "Positivo"
                                : entity.sentiment === "negative"
                                  ? "Negativo"
                                  : "Neutro"}
                            </Badge>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                )}
              </>
            ) : (
              <div className="text-center py-8">
                <p className="text-gray-500">Nenhuma análise de sentimento disponível para este feedback.</p>
              </div>
            )}
          </TabsContent>

<TabsContent value="notes" className="space-y-4 mt-4">
            <Card>
              <CardHeader className="pb-2">
                <div className="flex justify-between items-center">
                  <CardTitle className="text-lg">Notas e Observações</CardTitle>
                  <Button variant="ghost" size="sm" onClick={() => setIsEditing(!isEditing)} disabled={isUpdating}>
                    {isEditing ? (
                      <>
                        <X className="h-4 w-4 mr-1" />
                        Cancelar
                      </>
                    ) : (
                      <>
                        <Edit className="h-4 w-4 mr-1" />
                        Editar
                      </>
                    )}
                  </Button>
                </div>
              </CardHeader>
              <CardContent>
                {isEditing ? (
                  <div className="space-y-2">
                    <Textarea
                      value={notes}
                      onChange={(e) => setNotes(e.target.value)}
                      placeholder="Adicione notas sobre este feedback..."
                      className="min-h-[150px]"
                    />
                    <Button onClick={handleSaveNotes} disabled={isUpdating} className="w-full">
                      {isUpdating ? (
                        <>
                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                          Salvando...
                        </>
                      ) : (
                        <>
                          <Save className="h-4 w-4 mr-2" />
                          Salvar Notas
                        </>
                      )}
                    </Button>
                  </div>
                ) : (
                  <div className="min-h-[150px] p-3 bg-gray-50 rounded-md whitespace-pre-line">
                    {notes || "Nenhuma nota adicionada."}
                  </div>
                )}
              </CardContent>
            </Card>

<div className="grid grid-cols-2 gap-4">
              <Button
                variant={feedback.resolved ? "outline" : "default"}
                onClick={handleResolve}
                disabled={isUpdating}
                className="w-full"
              >
                {isUpdating ? (
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                ) : (
                  <CheckCircle className="h-4 w-4 mr-2" />
                )}
                {feedback.resolved ? "Marcar como Não Resolvido" : "Marcar como Resolvido"}
              </Button>

<Button
                variant={feedback.followUpRequired ? "outline" : "secondary"}
                onClick={handleFollowUp}
                disabled={isUpdating}
                className="w-full"
              >
                {isUpdating ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Calendar className="h-4 w-4 mr-2" />}
                {feedback.followUpRequired ? "Remover Follow-up" : "Adicionar Follow-up"}
              </Button>
            </div>
          </TabsContent>
        </Tabs>

<DialogFooter>
          <Button variant="outline" onClick={onClose}>
            Fechar
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/sentiment-dashboard.tsx" isFixed="true"
"use client"

import { useState, useEffect } from "react"
import {
  Loader2,
  Filter,
  RefreshCw,
  BarChart3,
  PieChart,
  MessageSquare,
  AlertTriangle,
  ThumbsUp,
  Meh,
  ThumbsDown,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import type { FeedbackFilter } from "../../types/sentiment-analysis"
import { useSentimentAnalysis } from "../../hooks/use-sentiment-analysis"
import { SentimentTrendChart } from "./sentiment-trend-chart"
import { SentimentDistributionChart } from "./sentiment-distribution-chart"
import { KeywordCloudChart } from "./keyword-cloud-chart"
import { CategorySentimentChart } from "./category-sentiment-chart"
import { FeedbackFilterForm } from "./feedback-filter-form"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
import { FeedbackCard } from "./feedback-card"
import type { CustomerFeedback } from "../../types/sentiment-analysis"

export function SentimentDashboard() {
  const { isLoading, error, dashboardData, getDashboardData, updateFeedback } = useSentimentAnalysis()
  const [filter, setFilter] = useState<FeedbackFilter>({})
  const [isFilterOpen, setIsFilterOpen] = useState(false)
  const [timeframe, setTimeframe] = useState<"day" | "week" | "month">("day")

useEffect(() => {
    loadDashboardData()
  }, [])

const loadDashboardData = async () => {
    try {
      await getDashboardData(filter)
    } catch (error) {
      console.error("Error loading dashboard data:", error)
    }
  }

const handleFilterChange = (newFilter: FeedbackFilter) => {
    setFilter(newFilter)
    loadDashboardData()
    setIsFilterOpen(false)
  }

const handleTimeframeChange = (newTimeframe: "day" | "week" | "month") => {
    setTimeframe(newTimeframe)
  }

const handleUpdateFeedback = async (id: string, updates: Partial<CustomerFeedback>) => {
    try {
      await updateFeedback(id, updates)
      // Reload dashboard data to reflect changes
      loadDashboardData()
    } catch (error) {
      console.error("Error updating feedback:", error)
    }
  }

return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-2xl font-bold">Dashboard de Análise de Sentimento</h2>
        <div className="flex items-center space-x-2">
          <Button variant="outline" size="sm" onClick={loadDashboardData}>
            <RefreshCw className="h-4 w-4 mr-2" />
            Atualizar
          </Button>

<Sheet open={isFilterOpen} onOpenChange={setIsFilterOpen}>
            <SheetTrigger asChild>
              <Button variant="outline" size="sm">
                <Filter className="h-4 w-4 mr-2" />
                Filtrar
              </Button>
            </SheetTrigger>
            <SheetContent>
              <SheetHeader>
                <SheetTitle>Filtrar Dashboard</SheetTitle>
              </SheetHeader>
              <div className="py-4">
                <FeedbackFilterForm initialFilter={filter} onFilterChange={handleFilterChange} />
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>

{error && (
        <Alert variant="destructive">
          <AlertTitle>Erro</AlertTitle>
          <AlertDescription>{error}</AlertDescription>
        </Alert>
      )}

{isLoading ? (
        <div className="flex justify-center items-center py-12">
          <Loader2 className="h-8 w-8 animate-spin text-primary" />
        </div>
      ) : !dashboardData ? (
        <div className="text-center py-12 border rounded-lg bg-gray-50">
          <p className="text-gray-500">Nenhum dado disponível.</p>
          <p className="text-gray-400 text-sm mt-1">Tente ajustar os filtros ou adicionar novos feedbacks.</p>
        </div>
      ) : (
        <>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Sentimento Geral</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <div className="mr-2 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
                      <ThumbsUp className="h-5 w-5 text-green-600" />
                    </div>
                    <div>
                      <p className="text-xs text-gray-500">Positivo</p>
                      <p className="text-xl font-bold">{Math.round(dashboardData.overallSentiment.positive * 100)}%</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <div className="mr-2 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
                      <Meh className="h-5 w-5 text-blue-600" />
                    </div>
                    <div>
                      <p className="text-xs text-gray-500">Neutro</p>
                      <p className="text-xl font-bold">{Math.round(dashboardData.overallSentiment.neutral * 100)}%</p>
                    </div>
                  </div>

<div className="flex items-center">
                    <div className="mr-2 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
                      <ThumbsDown className="h-5 w-5 text-red-600" />
                    </div>
                    <div>
                      <p className="text-xs text-gray-500">Negativo</p>
                      <p className="text-xl font-bold">{Math.round(dashboardData.overallSentiment.negative * 100)}%</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Total de Feedback</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center">
                  <div className="mr-4 h-14 w-14 rounded-full bg-primary/10 flex items-center justify-center">
                    <MessageSquare className="h-7 w-7 text-primary" />
                  </div>
                  <div>
                    <p className="text-3xl font-bold">{dashboardData.totalFeedback}</p>
                    <p className="text-xs text-gray-500">feedbacks analisados</p>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <CardTitle className="text-sm font-medium">Atenção Necessária</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex items-center">
                  <div className="mr-4 h-14 w-14 rounded-full bg-yellow-100 flex items-center justify-center">
                    <AlertTriangle className="h-7 w-7 text-yellow-600" />
                  </div>
                  <div>
                    <p className="text-3xl font-bold">{dashboardData.needsAttention.length}</p>
                    <p className="text-xs text-gray-500">feedbacks negativos não resolvidos</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

<Tabs defaultValue="trends">
            <TabsList className="grid w-full grid-cols-4">
              <TabsTrigger value="trends">
                <BarChart3 className="h-4 w-4 mr-2" />
                Tendências
              </TabsTrigger>
              <TabsTrigger value="categories">
                <PieChart className="h-4 w-4 mr-2" />
                Categorias
              </TabsTrigger>
              <TabsTrigger value="keywords">
                <MessageSquare className="h-4 w-4 mr-2" />
                Palavras-chave
              </TabsTrigger>
              <TabsTrigger value="attention">
                <AlertTriangle className="h-4 w-4 mr-2" />
                Atenção
              </TabsTrigger>
            </TabsList>

<TabsContent value="trends" className="space-y-4 mt-4">
              <Card>
                <CardHeader>
                  <div className="flex justify-between items-center">
                    <CardTitle>Tendências de Sentimento</CardTitle>
                    <div className="flex space-x-1">
                      <Button
                        variant={timeframe === "day" ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleTimeframeChange("day")}
                      >
                        Diário
                      </Button>
                      <Button
                        variant={timeframe === "week" ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleTimeframeChange("week")}
                      >
                        Semanal
                      </Button>
                      <Button
                        variant={timeframe === "month" ? "default" : "outline"}
                        size="sm"
                        onClick={() => handleTimeframeChange("month")}
                      >
                        Mensal
                      </Button>
                    </div>
                  </div>
                  <CardDescription>Evolução do sentimento ao longo do tempo</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  <SentimentTrendChart data={dashboardData.trends} timeframe={timeframe} />
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Distribuição de Sentimento</CardTitle>
                  <CardDescription>Proporção de feedbacks positivos, neutros e negativos</CardDescription>
                </CardHeader>
                <CardContent className="h-80">
                  <SentimentDistributionChart
                    positive={dashboardData.overallSentiment.positive}
                    neutral={dashboardData.overallSentiment.neutral}
                    negative={dashboardData.overallSentiment.negative}
                  />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="categories" className="space-y-4 mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Sentimento por Categoria</CardTitle>
                  <CardDescription>Análise de sentimento dividida por categorias de feedback</CardDescription>
                </CardHeader>
                <CardContent className="h-96">
                  <CategorySentimentChart data={dashboardData.categorySentiment} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="keywords" className="space-y-4 mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Nuvem de Palavras-chave</CardTitle>
                  <CardDescription>Palavras mais frequentes nos feedbacks, coloridas por sentimento</CardDescription>
                </CardHeader>
                <CardContent className="h-96">
                  <KeywordCloudChart data={dashboardData.keywordAnalysis} />
                </CardContent>
              </Card>
            </TabsContent>

<TabsContent value="attention" className="space-y-4 mt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Feedbacks que Precisam de Atenção</CardTitle>
                  <CardDescription>Feedbacks negativos não resolvidos ou que requerem follow-up</CardDescription>
                </CardHeader>
                <CardContent>
                  {dashboardData.needsAttention.length === 0 ? (
                    <div className="text-center py-8">
                      <p className="text-gray-500">Nenhum feedback requer atenção no momento.</p>
                      <p className="text-gray-400 text-sm mt-1">Bom trabalho!</p>
                    </div>
                  ) : (
                    <div className="space-y-4">
                      {dashboardData.needsAttention.map((feedback) => (
                        <FeedbackCard key={feedback.id} feedback={feedback} onUpdate={handleUpdateFeedback} />
                      ))}
                    </div>
                  )}
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/sentiment-trend-chart.tsx"
"use client"

import { format } from "date-fns"
import { ptBR } from "date-fns/locale"
import type { SentimentTrend } from "../../types/sentiment-analysis"
import { Line, LineChart, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

type SentimentTrendChartProps = {
  data: SentimentTrend[]
  timeframe: "day" | "week" | "month"
}

export function SentimentTrendChart({ data, timeframe }: SentimentTrendChartProps) {
  // Format the date based on the timeframe
  const formatDate = (dateStr: string) => {
    const date = new Date(dateStr)
    if (timeframe === "day") {
      return format(date, "dd/MM", { locale: ptBR })
    } else if (timeframe === "week") {
      return format(date, "'Sem' w", { locale: ptBR })
    } else {
      return format(date, "MMM/yy", { locale: ptBR })
    }
  }

// Convert raw data to percentage
  const chartData = data.map((item) => ({
    date: formatDate(item.date),
    positivo: Math.round((item.positive / item.total) * 100),
    neutro: Math.round((item.neutral / item.total) * 100),
    negativo: Math.round((item.negative / item.total) * 100),
    total: item.total,
  }))

return (
    <ChartContainer
      config={{
        positivo: {
          label: "Positivo",
          color: "hsl(var(--chart-1))",
        },
        neutro: {
          label: "Neutro",
          color: "hsl(var(--chart-2))",
        },
        negativo: {
          label: "Negativo",
          color: "hsl(var(--chart-3))",
        },
      }}
      className="h-full"
    >
      <ResponsiveContainer width="100%" height="100%">
        <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="date" />
          <YAxis unit="%" />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Legend />
          <Line type="monotone" dataKey="positivo" stroke="var(--color-positivo)" name="Positivo" />
          <Line type="monotone" dataKey="neutro" stroke="var(--color-neutro)" name="Neutro" />
          <Line type="monotone" dataKey="negativo" stroke="var(--color-negativo)" name="Negativo" />
        </LineChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/sentiment-distribution-chart.tsx"
"use client"

import { PieChart, Pie, Cell, ResponsiveContainer, Legend } from "recharts"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

type SentimentDistributionChartProps = {
  positive: number
  neutral: number
  negative: number
}

export function SentimentDistributionChart({ positive, neutral, negative }: SentimentDistributionChartProps) {
  const data = [
    { name: "Positivo", value: Math.round(positive * 100) },
    { name: "Neutro", value: Math.round(neutral * 100) },
    { name: "Negativo", value: Math.round(negative * 100) },
  ]

return (
    <ChartContainer
      config={{
        Positivo: {
          label: "Positivo",
          color: "hsl(var(--chart-1))",
        },
        Neutro: {
          label: "Neutro",
          color: "hsl(var(--chart-2))",
        },
        Negativo: {
          label: "Negativo",
          color: "hsl(var(--chart-3))",
        },
      }}
      className="h-full"
    >
      <ResponsiveContainer width="100%" height="100%">
        <PieChart>
          <Pie
            data={data}
            cx="50%"
            cy="50%"
            labelLine={false}
            outerRadius={120}
            fill="#8884d8"
            dataKey="value"
            label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
          >
            {data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={`var(--color-${entry.name})`} />
            ))}
          </Pie>
          <ChartTooltip content={<ChartTooltipContent />} />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/category-sentiment-chart.tsx"
"use client"

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend, ResponsiveContainer } from "recharts"
import type { CategorySentiment } from "../../types/sentiment-analysis"
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"

type CategorySentimentChartProps = {
  data: CategorySentiment[]
}

export function CategorySentimentChart({ data }: CategorySentimentChartProps) {
  const getCategoryLabel = (category: string) => {
    switch (category) {
      case "product":
        return "Produto"
      case "service":
        return "Serviço"
      case "support":
        return "Suporte"
      case "sales":
        return "Vendas"
      case "installation":
        return "Instalação"
      case "other":
        return "Outro"
      default:
        return category
    }
  }

const chartData = data.map((item) => ({
    category: getCategoryLabel(item.category),
    positivo: Math.round((item.positive / item.total) * 100),
    neutro: Math.round((item.neutral / item.total) * 100),
    negativo: Math.round((item.negative / item.total) * 100),
    total: item.total,
    averageRating: item.averageRating?.toFixed(1) || "N/A",
  }))

return (
    <ChartContainer
      config={{
        positivo: {
          label: "Positivo",
          color: "hsl(var(--chart-1))",
        },
        neutro: {
          label: "Neutro",
          color: "hsl(var(--chart-2))",
        },
        negativo: {
          label: "Negativo",
          color: "hsl(var(--chart-3))",
        },
      }}
      className="h-full"
    >
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={chartData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="category" />
          <YAxis unit="%" />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Legend />
          <Bar dataKey="positivo" stackId="a" fill="var(--color-positivo)" name="Positivo" />
          <Bar dataKey="neutro" stackId="a" fill="var(--color-neutro)" name="Neutro" />
          <Bar dataKey="negativo" stackId="a" fill="var(--color-negativo)" name="Negativo" />
        </BarChart>
      </ResponsiveContainer>
    </ChartContainer>
  )
}
[V0_FILE]typescriptreact:file="modules/sales/components/feedback/keyword-cloud-chart.tsx"
"use client"

import { useEffect, useRef } from "react"
import type { KeywordAnalysis } from "../../types/sentiment-analysis"
import * as d3 from "d3"
import cloud from "d3-cloud"

type KeywordCloudChartProps = {
  data: KeywordAnalysis[]
}

export function KeywordCloudChart({ data }: KeywordCloudChartProps) {
  const svgRef = useRef<SVGSVGElement>(null)

useEffect(() => {
    if (!svgRef.current || !data.length) return

const svg = d3.select(svgRef.current)
    svg.selectAll("*").remove()

const width = svgRef.current.clientWidth
    const height = svgRef.current.clientHeight

const getSentimentColor = (sentiment: string) => {
      switch (sentiment) {
        case "positive":
          return "#22c55e"
        case "negative":
          return "#ef4444"
        case "neutral":
          return "#3b82f6"
        default:
          return "#6b7280"
      }
    }

const fontSizeScale = d3
      .scaleLinear()
      .domain([0, d3.max(data, (d) => d.count) || 1])
      .range([14, 60])

const layout = cloud()
      .size([width, height])
      .words(
        data.map((d) => ({
          text: d.keyword,
          size: fontSizeScale(d.count),
          sentiment: d.sentiment,
          count: d.count,
        })),
      )
      .padding(5)
      .rotate(() => 0)
      .fontSize((d) => d.size)
      .on("end", draw)

layout.start()

function draw(words: any[]) {
      svg
        .attr("width", layout.size()[0])
        .attr("height", layout.size()[1])
        .append("g")
        .attr("transform", `translate(${layout.size()[0] / 2},${layout.size()[1] / 2})`)
        .selectAll("text")
        .data(words)
        .enter()
        .append("text")
        .style("font-size", (d) => `${d.size}px`)
        .style("fill", (d) => getSentimentColor(d.sentiment))
        .attr("text-anchor", "middle")
        .attr("transform", (d) => `translate(${d.x},${d.y})`)
        .text((d) => d.text)
        .append("title")
        .text((d) => `${d.text} (${d.count} ocorrências)`)
    }
  }, [data])

return (
    <div className="w-full h-full flex items-center justify-center">
      <svg ref={svgRef} className="w-full h-full" />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/api/sales/sentiment/analyze/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import type { SentimentAnalysis } from "@/modules/sales/types/sentiment-analysis"

export async function POST(request: NextRequest) {
  try {
    const { text } = await request.json()

if (!text || typeof text !== "string") {
      return NextResponse.json({ error: "Text is required and must be a string" }, { status: 400 })
    }

// Call the Groq API for sentiment analysis
    const response = await fetch("https://api.groq.com/openai/v1/chat/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${process.env.GROQ_API_KEY}`,
      },
      body: JSON.stringify({
        model: "llama3-70b-8192",
        messages: [
          {
            role: "system",
            content: `You are a sentiment analysis expert. Analyze the following text and provide a detailed sentiment analysis with the following information:
            1. Overall sentiment (positive, negative, or neutral)
            2. Confidence scores for each sentiment category (positive, negative, neutral) as decimal values between 0 and 1
            3. Key phrases or keywords that influenced the sentiment
            4. Entities mentioned and their associated sentiment
            
            Respond in JSON format with the following structure:
            {
              "category": "positive|negative|neutral",
              "score": {
                "positive": 0.0-1.0,
                "negative": 0.0-1.0,
                "neutral": 0.0-1.0
              },
              "keywords": ["keyword1", "keyword2", ...],
              "entities": [
                {
                  "name": "entity name",
                  "type": "entity type",
                  "sentiment": "positive|negative|neutral"
                }
              ]
            }`,
          },
          {
            role: "user",
            content: text,
          },
        ],
        temperature: 0.1,
        response_format: { type: "json_object" },
      }),
    })

if (!response.ok) {
      const errorData = await response.json()
      console.error("Groq API error:", errorData)
      return NextResponse.json({ error: "Failed to analyze sentiment" }, { status: 500 })
    }

const data = await response.json()
    const analysisResult = JSON.parse(data.choices[0].message.content)

const sentimentAnalysis: SentimentAnalysis = {
      id: crypto.randomUUID(),
      text,
      score: analysisResult.score,
      category: analysisResult.category,
      keywords: analysisResult.keywords,
      entities: analysisResult.entities,
      createdAt: new Date().toISOString(),
    }

return NextResponse.json(sentimentAnalysis)
  } catch (error) {
    console.error("Error analyzing sentiment:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/sales/sentiment/feedback/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import type { CustomerFeedback, FeedbackFilter } from "@/modules/sales/types/sentiment-analysis"

// Mock database for feedback
const feedbackDatabase: CustomerFeedback[] = []

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams
    const page = Number.parseInt(searchParams.get("page") || "1")
    const limit = Number.parseInt(searchParams.get("limit") || "10")

// Parse filter parameters
    const filter: FeedbackFilter = {}
    if (searchParams.has("startDate")) filter.startDate = searchParams.get("startDate") || undefined
    if (searchParams.has("endDate")) filter.endDate = searchParams.get("endDate") || undefined
    if (searchParams.has("sentiment")) filter.sentiment = (searchParams.get("sentiment") as any) || undefined
    if (searchParams.has("source")) filter.source = (searchParams.get("source") as any) || undefined
    if (searchParams.has("category")) filter.category = (searchParams.get("category") as any) || undefined
    if (searchParams.has("resolved")) filter.resolved = searchParams.get("resolved") === "true"
    if (searchParams.has("followUpRequired")) filter.followUpRequired = searchParams.get("followUpRequired") === "true"
    if (searchParams.has("searchTerm")) filter.searchTerm = searchParams.get("searchTerm") || undefined
    if (searchParams.has("minRating")) filter.minRating = Number.parseInt(searchParams.get("minRating") || "0")
    if (searchParams.has("maxRating")) filter.maxRating = Number.parseInt(searchParams.get("maxRating") || "5")
    if (searchParams.has("tags[]")) {
      filter.tags = searchParams.getAll("tags[]")
    }

// Apply filters
    let filteredFeedback = [...feedbackDatabase]

if (filter.startDate) {
      filteredFeedback = filteredFeedback.filter((f) => new Date(f.createdAt) >= new Date(filter.startDate!))
    }

if (filter.endDate) {
      filteredFeedback = filteredFeedback.filter((f) => new Date(f.createdAt) <= new Date(filter.endDate!))
    }

if (filter.sentiment) {
      filteredFeedback = filteredFeedback.filter((f) => f.sentiment?.category === filter.sentiment)
    }

if (filter.source) {
      filteredFeedback = filteredFeedback.filter((f) => f.source === filter.source)
    }

if (filter.category) {
      filteredFeedback = filteredFeedback.filter((f) => f.category === filter.category)
    }

if (filter.resolved !== undefined) {
      filteredFeedback = filteredFeedback.filter((f) => f.resolved === filter.resolved)
    }

if (filter.followUpRequired !== undefined) {
      filteredFeedback = filteredFeedback.filter((f) => f.followUpRequired === filter.followUpRequired)
    }

if (filter.searchTerm) {
      const searchTerm = filter.searchTerm.toLowerCase()
      filteredFeedback = filteredFeedback.filter(
        (f) =>
          f.text.toLowerCase().includes(searchTerm) ||
          f.customerName.toLowerCase().includes(searchTerm) ||
          (f.salesRepName && f.salesRepName.toLowerCase().includes(searchTerm)),
      )
    }

if (filter.minRating !== undefined) {
      filteredFeedback = filteredFeedback.filter((f) => f.rating !== undefined && f.rating >= filter.minRating!)
    }

if (filter.maxRating !== undefined) {
      filteredFeedback = filteredFeedback.filter((f) => f.rating !== undefined && f.rating <= filter.maxRating!)
    }

if (filter.tags && filter.tags.length > 0) {
      filteredFeedback = filteredFeedback.filter((f) => filter.tags!.some((tag) => f.tags.includes(tag)))
    }

// Sort by date (newest first)
    filteredFeedback.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())

// Paginate
    const startIndex = (page - 1) * limit
    const endIndex = startIndex + limit
    const paginatedFeedback = filteredFeedback.slice(startIndex, endIndex)

return NextResponse.json({
      data: paginatedFeedback,
      total: filteredFeedback.length,
      page,
      limit,
    })
  } catch (error) {
    console.error("Error getting feedback list:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(request: NextRequest) {
  try {
    const feedbackData = await request.json()

// Validate required fields
    if (!feedbackData.customerName || !feedbackData.text || !feedbackData.source || !feedbackData.category) {
      return NextResponse.json({ error: "Missing required fields" }, { status: 400 })
    }

// Analyze sentiment
    const sentimentResponse = await fetch(`${request.nextUrl.origin}/api/sales/sentiment/analyze`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ text: feedbackData.text }),
    })

if (!sentimentResponse.ok) {
      console.error("Error analyzing sentiment:", await sentimentResponse.text())
    }

const sentiment = sentimentResponse.ok ? await sentimentResponse.json() : undefined

// Create new feedback
    const newFeedback: CustomerFeedback = {
      id: crypto.randomUUID(),
      customerId: feedbackData.customerId || "",
      customerName: feedbackData.customerName,
      text: feedbackData.text,
      source: feedbackData.source,
      category: feedbackData.category,
      rating: feedbackData.rating,
      sentiment,
      createdAt: new Date().toISOString(),
      salesRepId: feedbackData.salesRepId,
      salesRepName: feedbackData.salesRepName,
      tags: feedbackData.tags || [],
      resolved: feedbackData.resolved || false,
      resolvedAt: feedbackData.resolvedAt,
      resolvedBy: feedbackData.resolvedBy,
      followUpRequired: feedbackData.followUpRequired || false,
      followUpDate: feedbackData.followUpDate,
      followUpAssignedTo: feedbackData.followUpAssignedTo,
      notes: feedbackData.notes,
    }

// Add to database
    feedbackDatabase.push(newFeedback)

return NextResponse.json(newFeedback)
  } catch (error) {
    console.error("Error creating feedback:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/sales/sentiment/feedback/[id]/route.ts"
import { type NextRequest, NextResponse } from "next/server"
import type { CustomerFeedback } from "@/modules/sales/types/sentiment-analysis"

// Mock database for feedback (reference to the same array in the main route)
const feedbackDatabase: CustomerFeedback[] = []

export async function GET(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

const feedback = feedbackDatabase.find((f) => f.id === id)

if (!feedback) {
      return NextResponse.json({ error: "Feedback not found" }, { status: 404 })
    }

return NextResponse.json(feedback)
  } catch (error) {
    console.error("Error getting feedback:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function PATCH(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id
    const updates = await request.json()

const feedbackIndex = feedbackDatabase.findIndex((f) => f.id === id)

if (feedbackIndex === -1) {
      return NextResponse.json({ error: "Feedback not found" }, { status: 404 })
    }

// Update the feedback
    const updatedFeedback = {
      ...feedbackDatabase[feedbackIndex],
      ...updates,
    }

feedbackDatabase[feedbackIndex] = updatedFeedback

return NextResponse.json(updatedFeedback)
  } catch (error) {
    console.error("Error updating feedback:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function DELETE(request: NextRequest, { params }: { params: { id: string } }) {
  try {
    const id = params.id

const feedbackIndex = feedbackDatabase.findIndex((f) => f.id === id)

if (feedbackIndex === -1) {
      return NextResponse.json({ error: "Feedback not found" }, { status: 404 })
    }

// Remove the feedback
    feedbackDatabase.splice(feedbackIndex, 1)

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error deleting feedback:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="app/api/sales/sentiment/dashboard/route.ts" isFixed="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import type {
  CustomerFeedback,
  FeedbackFilter,
  SentimentDashboardData,
  SentimentTrend,
  KeywordAnalysis,
  CategorySentiment,
} from "@/modules/sales/types/sentiment-analysis"

// Mock database for feedback (reference to the same array in the main route)
const feedbackDatabase: CustomerFeedback[] = []

export async function GET(request: NextRequest) {
  try {
    const searchParams = request.nextUrl.searchParams