File size: 7,676 Bytes
b8e6434 5581012 b8e6434 ff8bae0 8663682 b8e6434 5581012 8663682 5581012 b8e6434 ff8bae0 b8e6434 ff8bae0 b8e6434 ff8bae0 b8e6434 ff8bae0 b8e6434 8663682 2b78f35 40fe703 5581012 2b78f35 5581012 40fe703 5581012 40fe703 b8e6434 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 | "use client";
import { useState } from "react";
import type { CompanyProfile as CompanyProfileType } from "../lib/types";
type Props = {
profile: CompanyProfileType;
onSave: (profile: CompanyProfileType) => void;
};
export default function CompanyProfile({ profile, onSave }: Props) {
const [form, setForm] = useState(profile);
// Use local strings for editing lists
const [servicesStr, setServicesStr] = useState(profile.services.join(", "));
const [certsStr, setCertsStr] = useState(profile.certifications?.join(", ") || "");
const [regionsStr, setRegionsStr] = useState(profile.regions?.join(", ") || "");
const [docsStr, setDocsStr] = useState(profile.documents_available?.join(", ") || "");
const [keywordsStr, setKeywordsStr] = useState(profile.keywords?.join(", ") || "");
const [saving, setSaving] = useState(false);
const [saveStatus, setSaveStatus] = useState<"idle" | "saving" | "success" | "error">("idle");
const handleSave = async () => {
console.log("[CompanyProfile] Clicked Save Profile");
setSaving(true);
setSaveStatus("saving");
try {
const updatedProfile = {
...form,
services: servicesStr.split(",").map((s) => s.trim()).filter(Boolean),
certifications: certsStr.split(",").map((s) => s.trim()).filter(Boolean),
regions: regionsStr.split(",").map((s) => s.trim()).filter(Boolean),
documents_available: docsStr.split(",").map((s) => s.trim()).filter(Boolean),
keywords: keywordsStr.split(",").map((s) => s.trim()).filter(Boolean),
};
console.log("[CompanyProfile] Sending to onSave:", updatedProfile);
await onSave(updatedProfile);
setSaveStatus("success");
setTimeout(() => setSaveStatus("idle"), 3000);
} catch (e) {
console.error("[CompanyProfile] Save failed", e);
setSaveStatus("error");
setTimeout(() => setSaveStatus("idle"), 3000);
} finally {
setSaving(false);
}
};
return (
<div className="space-y-6">
<div className="grid gap-6 lg:grid-cols-2">
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Company name</span>
<input
value={form.name}
onChange={(event) => setForm({ ...form, name: event.target.value })}
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Industry</span>
<input
value={form.industry}
onChange={(event) => setForm({ ...form, industry: event.target.value })}
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
</div>
<div className="grid gap-6 lg:grid-cols-2">
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Services</span>
<input
value={servicesStr}
onChange={(event) => setServicesStr(event.target.value)}
placeholder="AI automation, web apps, data dashboards"
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Experience</span>
<input
value={form.experience}
onChange={(event) => setForm({ ...form, experience: event.target.value })}
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
</div>
<div className="grid gap-6 lg:grid-cols-2">
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Certifications</span>
<input
value={certsStr}
onChange={(event) => setCertsStr(event.target.value)}
placeholder="ISO 9001, ISO 27001"
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Regions</span>
<input
value={regionsStr}
onChange={(event) => setRegionsStr(event.target.value)}
placeholder="Metropolitana, Valparaíso"
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
</div>
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Documents available</span>
<input
value={docsStr}
onChange={(event) => setDocsStr(event.target.value)}
placeholder="RUT, Portfolio, Financial statements"
className="mt-3 w-full rounded-2xl border border-slate-800 bg-slate-900 px-4 py-3 text-white outline-none"
/>
</label>
<label className="block rounded-3xl border border-slate-800 bg-slate-950/80 p-5">
<span className="text-sm text-slate-400">Keywords (for recommendations)</span>
<input
value={keywordsStr}
onChange={(event) => setKeywordsStr(event.target.value)}
placeholder="software, AI, development, consulting"
className="mt-3 w-full rounded-2xl border border-indigo-500/30 bg-slate-900 px-4 py-3 text-white outline-none focus:border-indigo-500 transition-all shadow-[0_0_15px_rgba(99,102,241,0.05)]"
/>
<p className="text-[10px] text-slate-500 mt-2 font-mono uppercase tracking-widest">Separate with commas. These determine your Dashboard recommendations.</p>
</label>
<div className="flex justify-center pt-8 pb-4">
<button
type="button"
onClick={handleSave}
disabled={saving}
className={`group relative overflow-hidden rounded-2xl px-16 py-5 font-bold text-slate-950 transition-all active:scale-95 shadow-2xl ${
saveStatus === "success" ? "bg-green-500 shadow-green-500/40" :
saveStatus === "error" ? "bg-red-500 shadow-red-500/40" :
"bg-cyan hover:bg-sky shadow-cyan/40"
} ${saving ? "opacity-70 cursor-wait" : "cursor-pointer"}`}
>
<span className="relative z-10 flex items-center gap-3">
{saveStatus === "idle" && "Save Profile"}
{saveStatus === "saving" && (
<>
<span className="animate-spin text-xl">⏳</span>
Saving...
</>
)}
{saveStatus === "success" && (
<>
<span className="text-xl">✅</span>
Saved!
</>
)}
{saveStatus === "error" && (
<>
<span className="text-xl">❌</span>
Error!
</>
)}
</span>
{saveStatus === "idle" && (
<div className="absolute inset-0 bg-gradient-to-r from-white/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
)}
</button>
</div>
</div>
);
}
|