@adminide-stack/yantra-mobile 12.0.69-alpha.9 → 12.0.69

package/lib/features/job-search/InterviewPanel.js

@@ -0,0 +1,637 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useEffect}from'react';import {StyleSheet,View,Text,ScrollView,Pressable,ActivityIndicator,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {AUDIENCE_LABEL}from'./types.js';const AUDIENCE_TINT = {
+  "recruiter-screen": "#0ea5e9",
+  "hiring-manager": "#8b5cf6",
+  "peer-technical": "#3b82f6",
+  "panel-mixed": "#f59e0b",
+  other: "#94a3b8"
+};
+const FEEDBACK_TONE = {
+  green: {
+    bg: "rgba(34,197,94,0.12)",
+    ink: "#15803d"
+  },
+  yellow: {
+    bg: "rgba(245,158,11,0.12)",
+    ink: "#b45309"
+  },
+  red: {
+    bg: "rgba(239,68,68,0.12)",
+    ink: "#b91c1c"
+  }
+};
+function InterviewPanel({
+  applications,
+  error,
+  focusApplicationId,
+  ink,
+  muted,
+  card,
+  border,
+  accent = "#4f46e5",
+  accentInk = "#fcfcfe",
+  chip = "#eceff5",
+  danger = "#e11d48",
+  onPrep,
+  onPractice
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const [selectedId, setSelectedId] = useState((_b = (_a = applications[0]) == null ? void 0 : _a.id) != null ? _b : null);
+  useEffect(() => {
+    if (focusApplicationId) setSelectedId(focusApplicationId);
+  }, [focusApplicationId]);
+  const selected = (_c = applications.find((a) => a.id === selectedId)) != null ? _c : null;
+  const [prep, setPrep] = useState((_d = selected == null ? void 0 : selected.interview) != null ? _d : null);
+  const [prepping, setPrepping] = useState(false);
+  const [openRound, setOpenRound] = useState(0);
+  const [practiceOn, setPracticeOn] = useState(false);
+  const [question, setQuestion] = useState("");
+  const [answer, setAnswer] = useState("");
+  const [feedback, setFeedback] = useState(null);
+  const [history, setHistory] = useState([]);
+  const [busy, setBusy] = useState(false);
+  useEffect(() => {
+    var _a2, _b2;
+    if (!selectedId && applications[0]) setSelectedId(applications[0].id);
+    if (selectedId && !applications.some((a) => a.id === selectedId)) {
+      setSelectedId((_b2 = (_a2 = applications[0]) == null ? void 0 : _a2.id) != null ? _b2 : null);
+    }
+  }, [applications, selectedId]);
+  useEffect(() => {
+    const app = applications.find((a) => a.id === selectedId);
+    if (app == null ? void 0 : app.interview) setPrep(app.interview);
+  }, [applications, selectedId]);
+  const pick = (id) => {
+    var _a2, _b2;
+    setSelectedId(id);
+    const app = (_a2 = applications.find((a) => a.id === id)) != null ? _a2 : null;
+    setPrep((_b2 = app == null ? void 0 : app.interview) != null ? _b2 : null);
+    setOpenRound(0);
+    setPracticeOn(false);
+    setFeedback(null);
+    setHistory([]);
+    setQuestion("");
+    setAnswer("");
+  };
+  const generate = async () => {
+    if (!selected) return;
+    setPrepping(true);
+    try {
+      const p = await onPrep(selected);
+      if (p) setPrep(p);
+    } finally {
+      setPrepping(false);
+    }
+  };
+  const startPractice = async () => {
+    if (!selected) return;
+    setPracticeOn(true);
+    setBusy(true);
+    setFeedback(null);
+    setHistory([]);
+    setAnswer("");
+    try {
+      const r = await onPractice(selected, {
+        history: []
+      });
+      if (r) setQuestion(r.nextQuestion);
+    } finally {
+      setBusy(false);
+    }
+  };
+  const submitAnswer = async () => {
+    var _a2;
+    if (!selected || !question.trim() || !answer.trim()) return;
+    setBusy(true);
+    try {
+      const r = await onPractice(selected, {
+        question,
+        answer,
+        history
+      });
+      if (r) {
+        setFeedback((_a2 = r.feedback) != null ? _a2 : null);
+        setHistory((h) => [...h, {
+          question,
+          answer
+        }]);
+        setQuestion(r.nextQuestion);
+        setAnswer("");
+      }
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (applications.length === 0) {
+    return /* @__PURE__ */ jsx(View, { style: styles.empty, children: /* @__PURE__ */ jsx(Text, { style: {
+      color: muted,
+      textAlign: "center",
+      lineHeight: 20
+    }, children: "No applications yet. Use Tailor & apply from Jobs, then prep for interviews here." }) });
+  }
+  return /* @__PURE__ */ jsxs(ScrollView, { contentContainerStyle: styles.list, keyboardShouldPersistTaps: "handled", children: [
+    error ? /* @__PURE__ */ jsx(Text, { style: {
+      color: danger
+    }, children: error }) : null,
+    /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+      color: muted
+    }], children: "Prep for" }),
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.pickerRow, children: applications.map((a) => {
+      const on = a.id === selectedId;
+      return /* @__PURE__ */ jsxs(Pressable, { onPress: () => pick(a.id), style: [styles.pickCard, {
+        backgroundColor: card,
+        borderColor: border
+      }, on && {
+        borderColor: accent,
+        backgroundColor: `${accent}14`
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.pickCompany, {
+          color: on ? accent : ink
+        }], numberOfLines: 1, children: a.company }),
+        /* @__PURE__ */ jsx(Text, { style: {
+          color: muted,
+          fontSize: 12
+        }, numberOfLines: 2, children: a.role }),
+        a.interview ? /* @__PURE__ */ jsxs(View, { style: styles.readyRow, children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check-circle", size: 12, color: "#16a34a" }),
+          /* @__PURE__ */ jsx(Text, { style: {
+            color: "#16a34a",
+            fontSize: 10,
+            fontWeight: "700"
+          }, children: "prep ready" })
+        ] }) : null
+      ] }, a.id);
+    }) }),
+    selected ? /* @__PURE__ */ jsxs(View, { style: [styles.actionBar, {
+      borderColor: border
+    }], children: [
+      /* @__PURE__ */ jsxs(View, { style: {
+        flex: 1,
+        minWidth: 0
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.role, {
+          color: ink
+        }], numberOfLines: 1, children: selected.company }),
+        /* @__PURE__ */ jsx(Text, { style: {
+          color: muted,
+          fontSize: 13
+        }, numberOfLines: 2, children: selected.role })
+      ] }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => void generate(), disabled: prepping, style: [styles.primaryBtn, {
+        backgroundColor: accent
+      }, prepping && {
+        opacity: 0.5
+      }], children: [
+        prepping ? /* @__PURE__ */ jsx(ActivityIndicator, { color: accentInk, size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "auto-fix", size: 14, color: accentInk }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.primaryText, {
+          color: accentInk
+        }], children: prep ? "Regenerate" : "Generate prep" })
+      ] }),
+      prep ? /* @__PURE__ */ jsxs(Pressable, { onPress: () => practiceOn ? setPracticeOn(false) : void startPractice(), style: [styles.secondaryBtn, {
+        borderColor: border,
+        backgroundColor: chip
+      }], children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "message-text-outline", size: 14, color: ink }),
+        /* @__PURE__ */ jsx(Text, { style: {
+          color: ink,
+          fontWeight: "700",
+          fontSize: 12
+        }, children: practiceOn ? "Prep" : "Practice" })
+      ] }) : null
+    ] }) : null,
+    prepping && !prep ? /* @__PURE__ */ jsxs(View, { style: styles.centerBlock, children: [
+      /* @__PURE__ */ jsx(ActivityIndicator, { color: accent }),
+      /* @__PURE__ */ jsx(Text, { style: {
+        color: muted,
+        marginTop: 8
+      }, children: "Building interview prep\u2026" })
+    ] }) : null,
+    !prep && !prepping ? /* @__PURE__ */ jsx(View, { style: [styles.card, styles.dashed, {
+      borderColor: border
+    }], children: /* @__PURE__ */ jsx(Text, { style: {
+      color: muted,
+      lineHeight: 20,
+      textAlign: "center"
+    }, children: "Generate prep to see rounds, likely questions with answers, your story bank, and a checklist." }) }) : null,
+    prep && practiceOn ? /* @__PURE__ */ jsx(PracticePane, { question, answer, setAnswer, feedback, busy, history, ink, muted, card, border, accent, accentInk, onSubmit: () => void submitAnswer() }) : null,
+    prep && !practiceOn ? /* @__PURE__ */ jsxs(View, { style: {
+      gap: 14
+    }, children: [
+      prep.processOverview ? /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+        backgroundColor: card,
+        borderColor: border
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: "Process overview" }),
+        /* @__PURE__ */ jsx(Text, { style: {
+          color: ink,
+          lineHeight: 20
+        }, children: prep.processOverview })
+      ] }) : null,
+      /* @__PURE__ */ jsxs(View, { style: {
+        gap: 8
+      }, children: [
+        /* @__PURE__ */ jsxs(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: [
+          "Rounds (",
+          (_f = (_e = prep.rounds) == null ? void 0 : _e.length) != null ? _f : 0,
+          ")"
+        ] }),
+        ((_g = prep.rounds) != null ? _g : []).map((r, i) => {
+          var _a2, _b2, _c2, _d2, _e2;
+          const audience = (_a2 = r.audience) != null ? _a2 : "other";
+          const open = openRound === i;
+          return /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+            backgroundColor: card,
+            borderColor: border,
+            padding: 0
+          }], children: [
+            /* @__PURE__ */ jsxs(Pressable, { onPress: () => setOpenRound(open ? -1 : i), style: styles.roundHead, children: [
+              /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "account-group-outline", size: 16, color: muted }),
+              /* @__PURE__ */ jsxs(View, { style: {
+                flex: 1,
+                minWidth: 0,
+                gap: 4
+              }, children: [
+                /* @__PURE__ */ jsx(Text, { style: [styles.roundName, {
+                  color: ink
+                }], children: r.name }),
+                /* @__PURE__ */ jsx(View, { style: [styles.audiencePill, {
+                  backgroundColor: `${AUDIENCE_TINT[audience]}22`
+                }], children: /* @__PURE__ */ jsx(Text, { style: {
+                  color: AUDIENCE_TINT[audience],
+                  fontSize: 10,
+                  fontWeight: "700"
+                }, children: (_b2 = AUDIENCE_LABEL[audience]) != null ? _b2 : audience }) })
+              ] }),
+              /* @__PURE__ */ jsxs(Text, { style: {
+                color: muted,
+                fontSize: 11
+              }, children: [
+                (_d2 = (_c2 = r.questions) == null ? void 0 : _c2.length) != null ? _d2 : 0,
+                " questions"
+              ] })
+            ] }),
+            open ? /* @__PURE__ */ jsxs(View, { style: [styles.roundBody, {
+              borderTopColor: border
+            }], children: [
+              r.focus ? /* @__PURE__ */ jsxs(Text, { style: {
+                color: muted,
+                fontSize: 12
+              }, children: [
+                "Focus: ",
+                r.focus
+              ] }) : null,
+              ((_e2 = r.questions) != null ? _e2 : []).map((q, j) => /* @__PURE__ */ jsxs(View, { style: {
+                gap: 4
+              }, children: [
+                /* @__PURE__ */ jsx(Text, { style: {
+                  color: ink,
+                  fontWeight: "700",
+                  lineHeight: 20
+                }, children: q.question }),
+                q.whyAsked ? /* @__PURE__ */ jsxs(Text, { style: {
+                  color: muted,
+                  fontSize: 12
+                }, children: [
+                  "Why: ",
+                  q.whyAsked
+                ] }) : null,
+                q.suggestedAnswer ? /* @__PURE__ */ jsx(View, { style: [styles.answerBox, {
+                  backgroundColor: chip
+                }], children: /* @__PURE__ */ jsx(Text, { style: {
+                  color: ink,
+                  fontSize: 12,
+                  lineHeight: 18
+                }, children: q.suggestedAnswer }) }) : null
+              ] }, `${q.question}-${j}`))
+            ] }) : null
+          ] }, `${r.name}-${i}`);
+        })
+      ] }),
+      ((_h = prep.storyBank) == null ? void 0 : _h.length) ? /* @__PURE__ */ jsxs(View, { style: {
+        gap: 8
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: "Story bank (STAR)" }),
+        prep.storyBank.map((s, i) => /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+          backgroundColor: card,
+          borderColor: border
+        }], children: [
+          /* @__PURE__ */ jsx(Text, { style: [styles.roundName, {
+            color: ink
+          }], children: s.theme }),
+          /* @__PURE__ */ jsxs(Text, { style: {
+            color: muted,
+            fontSize: 12,
+            lineHeight: 18
+          }, children: [
+            /* @__PURE__ */ jsx(Text, { style: {
+              fontWeight: "700",
+              color: ink
+            }, children: "S: " }),
+            s.situation,
+            " ",
+            /* @__PURE__ */ jsx(Text, { style: {
+              fontWeight: "700",
+              color: ink
+            }, children: "T: " }),
+            s.task,
+            " ",
+            /* @__PURE__ */ jsx(Text, { style: {
+              fontWeight: "700",
+              color: ink
+            }, children: "A: " }),
+            s.action,
+            " ",
+            /* @__PURE__ */ jsx(Text, { style: {
+              fontWeight: "700",
+              color: ink
+            }, children: "R: " }),
+            s.result,
+            s.reflection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              " ",
+              /* @__PURE__ */ jsx(Text, { style: {
+                fontWeight: "700",
+                color: ink
+              }, children: "Reflection: " }),
+              s.reflection
+            ] }) : null
+          ] })
+        ] }, `${s.theme}-${i}`))
+      ] }) : null,
+      ((_i = prep.technicalChecklist) == null ? void 0 : _i.length) ? /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+        backgroundColor: card,
+        borderColor: border
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: "Technical checklist" }),
+        prep.technicalChecklist.map((c) => /* @__PURE__ */ jsxs(Text, { style: {
+          color: ink,
+          lineHeight: 20
+        }, children: [
+          "\u2610 ",
+          c
+        ] }, c))
+      ] }) : null,
+      ((_j = prep.questionsToAskThem) == null ? void 0 : _j.length) ? /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+        backgroundColor: card,
+        borderColor: border
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: "Questions to ask them" }),
+        prep.questionsToAskThem.map((q) => /* @__PURE__ */ jsxs(Text, { style: {
+          color: ink,
+          lineHeight: 20
+        }, children: [
+          "\u2022 ",
+          q
+        ] }, q))
+      ] }) : null,
+      ((_k = prep.redFlagsToWatch) == null ? void 0 : _k.length) ? /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+        backgroundColor: card,
+        borderColor: border
+      }], children: [
+        /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+          color: muted
+        }], children: "Red flags to watch" }),
+        prep.redFlagsToWatch.map((f) => /* @__PURE__ */ jsxs(Text, { style: {
+          color: "#b91c1c",
+          lineHeight: 20
+        }, children: [
+          "\u2022 ",
+          f
+        ] }, f))
+      ] }) : null
+    ] }) : null
+  ] });
+}
+function PracticePane({
+  question,
+  answer,
+  setAnswer,
+  feedback,
+  busy,
+  history,
+  ink,
+  muted,
+  card,
+  border,
+  accent,
+  accentInk,
+  onSubmit
+}) {
+  const tone = feedback ? FEEDBACK_TONE[feedback.status] : null;
+  return /* @__PURE__ */ jsxs(View, { style: {
+    gap: 12
+  }, children: [
+    history.length ? /* @__PURE__ */ jsxs(Text, { style: {
+      color: muted,
+      fontSize: 12
+    }, children: [
+      history.length,
+      " answered \xB7 mock interview"
+    ] }) : null,
+    feedback && tone ? /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+      backgroundColor: card,
+      borderColor: border
+    }], children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.feedbackPill, {
+        backgroundColor: tone.bg
+      }], children: /* @__PURE__ */ jsx(Text, { style: {
+        color: tone.ink,
+        fontSize: 11,
+        fontWeight: "800"
+      }, children: feedback.status === "green" ? "Strong" : feedback.status === "yellow" ? "Getting there" : "Needs work" }) }),
+      /* @__PURE__ */ jsxs(Text, { style: {
+        color: ink,
+        lineHeight: 20
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: {
+          fontWeight: "700"
+        }, children: "What landed: " }),
+        feedback.whatLanded
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { style: {
+        color: ink,
+        lineHeight: 20
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: {
+          fontWeight: "700"
+        }, children: "To sharpen: " }),
+        feedback.whatToSharpen
+      ] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.answerBox, {
+        backgroundColor: tone.bg
+      }], children: /* @__PURE__ */ jsxs(Text, { style: {
+        color: ink,
+        fontSize: 12,
+        lineHeight: 18
+      }, children: [
+        /* @__PURE__ */ jsx(Text, { style: {
+          fontWeight: "700"
+        }, children: "Stronger version: " }),
+        feedback.strongerVersion
+      ] }) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(View, { style: [styles.card, {
+      backgroundColor: card,
+      borderColor: border
+    }], children: [
+      /* @__PURE__ */ jsx(Text, { style: [styles.sectionLabel, {
+        color: muted
+      }], children: "Interviewer asks" }),
+      busy && !question ? /* @__PURE__ */ jsx(ActivityIndicator, { color: accent }) : /* @__PURE__ */ jsx(Text, { style: {
+        color: ink,
+        fontWeight: "700",
+        lineHeight: 22
+      }, children: question || "\u2014" }),
+      /* @__PURE__ */ jsx(TextInput, { value: answer, onChangeText: setAnswer, multiline: true, placeholder: "Your answer\u2026", placeholderTextColor: muted, style: [styles.input, {
+        color: ink,
+        borderColor: border
+      }], textAlignVertical: "top" }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: onSubmit, disabled: busy || !answer.trim() || !question, style: [styles.primaryBtn, {
+        backgroundColor: accent,
+        alignSelf: "flex-end"
+      }, (busy || !answer.trim() || !question) && {
+        opacity: 0.45
+      }], children: [
+        busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: accentInk, size: "small" }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "send", size: 14, color: accentInk }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.primaryText, {
+          color: accentInk
+        }], children: "Answer" })
+      ] })
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  list: {
+    padding: 16,
+    gap: 12,
+    paddingBottom: 40
+  },
+  empty: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  sectionLabel: {
+    fontSize: 11,
+    fontWeight: "800",
+    letterSpacing: 0.6,
+    textTransform: "uppercase"
+  },
+  pickerRow: {
+    gap: 8,
+    paddingVertical: 2
+  },
+  pickCard: {
+    width: 168,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 10,
+    gap: 4
+  },
+  pickCompany: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  readyRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    marginTop: 2
+  },
+  actionBar: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: 8,
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  role: {
+    fontSize: 15,
+    fontWeight: "800"
+  },
+  primaryBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  primaryText: {
+    fontSize: 12,
+    fontWeight: "700"
+  },
+  secondaryBtn: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 10,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  centerBlock: {
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 36
+  },
+  card: {
+    borderWidth: 1,
+    borderRadius: 14,
+    padding: 14,
+    gap: 8
+  },
+  dashed: {
+    borderStyle: "dashed"
+  },
+  roundHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  },
+  roundName: {
+    fontSize: 14,
+    fontWeight: "700"
+  },
+  audiencePill: {
+    alignSelf: "flex-start",
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 2
+  },
+  roundBody: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    padding: 12,
+    gap: 12
+  },
+  answerBox: {
+    borderRadius: 10,
+    padding: 10
+  },
+  feedbackPill: {
+    alignSelf: "flex-start",
+    borderRadius: 999,
+    paddingHorizontal: 8,
+    paddingVertical: 3
+  },
+  input: {
+    minHeight: 110,
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+    fontSize: 14,
+    lineHeight: 20
+  }
+});export{InterviewPanel};//# sourceMappingURL=InterviewPanel.js.map