mirror of
https://github.com/RichieCahill/dotfiles.git
synced 2026-04-17 04:58:19 -04:00
removing react
This commit is contained in:
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>frontend</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
3315
frontend/package-lock.json
generated
3315
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "frontend",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.12.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.39.1",
|
||||
"@types/node": "^24.10.1",
|
||||
"@types/react": "^19.2.5",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.4.24",
|
||||
"globals": "^16.5.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.46.4",
|
||||
"vite": "^7.2.4"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,654 +0,0 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.app {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 15px 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
background: var(--color-bg-card);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--color-danger);
|
||||
border-color: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: var(--color-danger-hover);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
background: var(--color-bg-muted);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: var(--color-bg-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
background: var(--color-bg-error);
|
||||
color: var(--color-text-error);
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.section h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.section h4 {
|
||||
margin: 15px 0 10px;
|
||||
font-size: 14px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid var(--color-border-lighter);
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
background: var(--color-tag-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.add-form {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.add-form select,
|
||||
.add-form input {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
min-width: 200px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: var(--color-bg-card);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.need-list .header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.need-form {
|
||||
background: var(--color-bg-muted);
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.need-items {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.need-items li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 15px;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.need-info p {
|
||||
margin: 5px 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Graph styles */
|
||||
.graph-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.graph-hint {
|
||||
color: var(--color-text-muted);
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.selected-info {
|
||||
margin-top: 15px;
|
||||
padding: 15px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.selected-info h3 {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.selected-info p {
|
||||
margin: 5px 0;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.legend {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.legend h4 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.legend-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.legend-line {
|
||||
width: 30px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Weight control styles */
|
||||
.weight-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.weight-control input[type="range"] {
|
||||
width: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.weight-value {
|
||||
min-width: 20px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.weight-display {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-muted);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* ID Card Styles */
|
||||
.id-card {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.id-card-inner {
|
||||
background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
|
||||
background-image:
|
||||
radial-gradient(white 1px, transparent 1px),
|
||||
linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0a0a0f 100%);
|
||||
background-size: 50px 50px, 100% 100%;
|
||||
background-position: 0 0, 0 0;
|
||||
color: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
min-height: 500px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.id-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.id-card-header-left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.id-card-header-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.id-card-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.id-profile-pic {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.id-profile-placeholder {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #4ecdc4 0%, #44a8a0 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
}
|
||||
|
||||
.id-profile-placeholder span {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.id-card-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.id-card-actions .btn {
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-color: rgba(255,255,255,0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.id-card-actions .btn:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.id-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.5fr;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.id-card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.id-field {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.id-field-block {
|
||||
margin-top: 15px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.id-label {
|
||||
color: #4ecdc4;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.id-card-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.id-bio {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.id-relationships {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.id-section-title {
|
||||
font-size: 1.5rem;
|
||||
margin: 0 0 15px;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.2);
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.id-rel-group {
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.id-rel-label {
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.id-rel-group a {
|
||||
color: #4ecdc4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.id-rel-group a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.id-rel-type {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
.id-card-warnings {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.id-warning {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.warning-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff6b6b;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.warning-desc {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Management section */
|
||||
.id-card-manage {
|
||||
margin-top: 20px;
|
||||
background: var(--color-bg-muted);
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.id-card-manage summary {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.id-card-manage[open] summary {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.manage-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.manage-section h3 {
|
||||
margin: 0 0 15px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.manage-relationships {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.manage-rel-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.manage-rel-item a {
|
||||
font-weight: 500;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.manage-needs-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
.manage-needs-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
background: var(--color-bg-card);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.manage-needs-list li .btn {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.id-card-body {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.id-card-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.id-card-header {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, Route, Routes } from "react-router-dom";
|
||||
import { ContactDetail } from "./components/ContactDetail";
|
||||
import { ContactForm } from "./components/ContactForm";
|
||||
import { ContactList } from "./components/ContactList";
|
||||
import { NeedList } from "./components/NeedList";
|
||||
import { RelationshipGraph } from "./components/RelationshipGraph";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const [theme, setTheme] = useState<"light" | "dark">(() => {
|
||||
return (localStorage.getItem("theme") as "light" | "dark") || "light";
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.setAttribute("data-theme", theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
}, [theme]);
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<nav>
|
||||
<Link to="/contacts">Contacts</Link>
|
||||
<Link to="/graph">Graph</Link>
|
||||
<Link to="/needs">Needs</Link>
|
||||
<button className="btn btn-small theme-toggle" onClick={toggleTheme}>
|
||||
{theme === "light" ? "Dark" : "Light"}
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<Routes>
|
||||
<Route path="/" element={<ContactList />} />
|
||||
<Route path="/contacts" element={<ContactList />} />
|
||||
<Route path="/contacts/new" element={<ContactForm />} />
|
||||
<Route path="/contacts/:id" element={<ContactDetail />} />
|
||||
<Route path="/contacts/:id/edit" element={<ContactForm />} />
|
||||
<Route path="/graph" element={<RelationshipGraph />} />
|
||||
<Route path="/needs" element={<NeedList />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -1,105 +0,0 @@
|
||||
import type {
|
||||
Contact,
|
||||
ContactCreate,
|
||||
ContactListItem,
|
||||
ContactRelationship,
|
||||
ContactRelationshipCreate,
|
||||
ContactRelationshipUpdate,
|
||||
ContactUpdate,
|
||||
GraphData,
|
||||
Need,
|
||||
NeedCreate,
|
||||
} from "../types";
|
||||
|
||||
const API_BASE = "";
|
||||
|
||||
async function request<T>(
|
||||
endpoint: string,
|
||||
options?: RequestInit
|
||||
): Promise<T> {
|
||||
const response = await fetch(`${API_BASE}${endpoint}`, {
|
||||
...options,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...options?.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({}));
|
||||
throw new Error(error.detail || `HTTP ${response.status}`);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export const api = {
|
||||
// Needs
|
||||
needs: {
|
||||
list: () => request<Need[]>("/api/needs"),
|
||||
get: (id: number) => request<Need>(`/api/needs/${id}`),
|
||||
create: (data: NeedCreate) =>
|
||||
request<Need>("/api/needs", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
delete: (id: number) =>
|
||||
request<{ deleted: boolean }>(`/api/needs/${id}`, { method: "DELETE" }),
|
||||
},
|
||||
|
||||
// Contacts
|
||||
contacts: {
|
||||
list: (skip = 0, limit = 100) =>
|
||||
request<ContactListItem[]>(`/api/contacts?skip=${skip}&limit=${limit}`),
|
||||
get: (id: number) => request<Contact>(`/api/contacts/${id}`),
|
||||
create: (data: ContactCreate) =>
|
||||
request<Contact>("/api/contacts", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
update: (id: number, data: ContactUpdate) =>
|
||||
request<Contact>(`/api/contacts/${id}`, {
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
delete: (id: number) =>
|
||||
request<{ deleted: boolean }>(`/api/contacts/${id}`, { method: "DELETE" }),
|
||||
|
||||
// Contact-Need relationships
|
||||
addNeed: (contactId: number, needId: number) =>
|
||||
request<{ added: boolean }>(`/api/contacts/${contactId}/needs/${needId}`, {
|
||||
method: "POST",
|
||||
}),
|
||||
removeNeed: (contactId: number, needId: number) =>
|
||||
request<{ removed: boolean }>(`/api/contacts/${contactId}/needs/${needId}`, {
|
||||
method: "DELETE",
|
||||
}),
|
||||
|
||||
// Contact-Contact relationships
|
||||
getRelationships: (contactId: number) =>
|
||||
request<ContactRelationship[]>(`/api/contacts/${contactId}/relationships`),
|
||||
addRelationship: (contactId: number, data: ContactRelationshipCreate) =>
|
||||
request<ContactRelationship>(`/api/contacts/${contactId}/relationships`, {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
}),
|
||||
updateRelationship: (contactId: number, relatedContactId: number, data: ContactRelationshipUpdate) =>
|
||||
request<ContactRelationship>(
|
||||
`/api/contacts/${contactId}/relationships/${relatedContactId}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
body: JSON.stringify(data),
|
||||
}
|
||||
),
|
||||
removeRelationship: (contactId: number, relatedContactId: number) =>
|
||||
request<{ deleted: boolean }>(
|
||||
`/api/contacts/${contactId}/relationships/${relatedContactId}`,
|
||||
{ method: "DELETE" }
|
||||
),
|
||||
},
|
||||
|
||||
// Graph
|
||||
graph: {
|
||||
get: () => request<GraphData>("/api/graph"),
|
||||
},
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,456 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { Contact, ContactListItem, Need, RelationshipTypeValue } from "../types";
|
||||
import { RELATIONSHIP_TYPES } from "../types";
|
||||
|
||||
export function ContactDetail() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const [contact, setContact] = useState<Contact | null>(null);
|
||||
const [allNeeds, setAllNeeds] = useState<Need[]>([]);
|
||||
const [allContacts, setAllContacts] = useState<ContactListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [newNeedId, setNewNeedId] = useState<number | "">("");
|
||||
const [newRelContactId, setNewRelContactId] = useState<number | "">("");
|
||||
const [newRelType, setNewRelType] = useState<RelationshipTypeValue | "">("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
Promise.all([
|
||||
api.contacts.get(Number(id)),
|
||||
api.needs.list(),
|
||||
api.contacts.list(),
|
||||
])
|
||||
.then(([c, n, contacts]) => {
|
||||
setContact(c);
|
||||
setAllNeeds(n);
|
||||
setAllContacts(contacts.filter((ct) => ct.id !== Number(id)));
|
||||
})
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, [id]);
|
||||
|
||||
const handleAddNeed = async () => {
|
||||
if (!contact || newNeedId === "") return;
|
||||
try {
|
||||
await api.contacts.addNeed(contact.id, Number(newNeedId));
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
setNewNeedId("");
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to add need");
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveNeed = async (needId: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.removeNeed(contact.id, needId);
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to remove need");
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddRelationship = async () => {
|
||||
if (!contact || newRelContactId === "" || newRelType === "") return;
|
||||
try {
|
||||
await api.contacts.addRelationship(contact.id, {
|
||||
related_contact_id: Number(newRelContactId),
|
||||
relationship_type: newRelType,
|
||||
});
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
setNewRelContactId("");
|
||||
setNewRelType("");
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to add relationship"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveRelationship = async (relatedContactId: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.removeRelationship(contact.id, relatedContactId);
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to remove relationship"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdateWeight = async (relatedContactId: number, newWeight: number) => {
|
||||
if (!contact) return;
|
||||
try {
|
||||
await api.contacts.updateRelationship(contact.id, relatedContactId, {
|
||||
closeness_weight: newWeight,
|
||||
});
|
||||
const updated = await api.contacts.get(contact.id);
|
||||
setContact(updated);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error ? err.message : "Failed to update weight"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (error) return <div className="error">Error: {error}</div>;
|
||||
if (!contact) return <div>Contact not found</div>;
|
||||
|
||||
const availableNeeds = allNeeds.filter(
|
||||
(n) => !contact.needs.some((cn) => cn.id === n.id)
|
||||
);
|
||||
|
||||
const getContactName = (contactId: number) => {
|
||||
const c = allContacts.find((ct) => ct.id === contactId);
|
||||
return c?.name || `Contact #${contactId}`;
|
||||
};
|
||||
|
||||
const getRelationshipDisplayName = (type: string) => {
|
||||
const rt = RELATIONSHIP_TYPES.find((r) => r.value === type);
|
||||
return rt?.displayName || type;
|
||||
};
|
||||
|
||||
// Group relationships by category for display
|
||||
const groupRelationships = () => {
|
||||
const familial: typeof contact.related_to = [];
|
||||
const friends: typeof contact.related_to = [];
|
||||
const partners: typeof contact.related_to = [];
|
||||
const professional: typeof contact.related_to = [];
|
||||
const other: typeof contact.related_to = [];
|
||||
|
||||
const familialTypes = ['parent', 'child', 'sibling', 'grandparent', 'grandchild', 'aunt_uncle', 'niece_nephew', 'cousin', 'in_law'];
|
||||
const friendTypes = ['best_friend', 'close_friend', 'friend', 'acquaintance', 'neighbor'];
|
||||
const partnerTypes = ['spouse', 'partner'];
|
||||
const professionalTypes = ['mentor', 'mentee', 'business_partner', 'colleague', 'manager', 'direct_report', 'client'];
|
||||
|
||||
for (const rel of contact.related_to) {
|
||||
if (familialTypes.includes(rel.relationship_type)) {
|
||||
familial.push(rel);
|
||||
} else if (friendTypes.includes(rel.relationship_type)) {
|
||||
friends.push(rel);
|
||||
} else if (partnerTypes.includes(rel.relationship_type)) {
|
||||
partners.push(rel);
|
||||
} else if (professionalTypes.includes(rel.relationship_type)) {
|
||||
professional.push(rel);
|
||||
} else {
|
||||
other.push(rel);
|
||||
}
|
||||
}
|
||||
|
||||
return { familial, friends, partners, professional, other };
|
||||
};
|
||||
|
||||
const relationshipGroups = groupRelationships();
|
||||
|
||||
return (
|
||||
<div className="id-card">
|
||||
<div className="id-card-inner">
|
||||
{/* Header with name and profile pic */}
|
||||
<div className="id-card-header">
|
||||
<div className="id-card-header-left">
|
||||
<h1 className="id-card-title">I.D.: {contact.name}</h1>
|
||||
</div>
|
||||
<div className="id-card-header-right">
|
||||
{contact.profile_pic ? (
|
||||
<img
|
||||
src={contact.profile_pic}
|
||||
alt={`${contact.name}'s profile`}
|
||||
className="id-profile-pic"
|
||||
/>
|
||||
) : (
|
||||
<div className="id-profile-placeholder">
|
||||
<span>{contact.name.charAt(0).toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="id-card-actions">
|
||||
<Link to={`/contacts/${contact.id}/edit`} className="btn btn-small">
|
||||
Edit
|
||||
</Link>
|
||||
<Link to="/contacts" className="btn btn-small">
|
||||
Back
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="id-card-body">
|
||||
{/* Left column - Basic info */}
|
||||
<div className="id-card-left">
|
||||
{contact.legal_name && (
|
||||
<div className="id-field">Legal name: {contact.legal_name}</div>
|
||||
)}
|
||||
{contact.suffix && (
|
||||
<div className="id-field">Suffix: {contact.suffix}</div>
|
||||
)}
|
||||
{contact.gender && (
|
||||
<div className="id-field">Gender: {contact.gender}</div>
|
||||
)}
|
||||
{contact.age && (
|
||||
<div className="id-field">Age: {contact.age}</div>
|
||||
)}
|
||||
{contact.current_job && (
|
||||
<div className="id-field">Job: {contact.current_job}</div>
|
||||
)}
|
||||
{contact.social_structure_style && (
|
||||
<div className="id-field">Social style: {contact.social_structure_style}</div>
|
||||
)}
|
||||
{contact.self_sufficiency_score !== null && (
|
||||
<div className="id-field">Self-Sufficiency: {contact.self_sufficiency_score}</div>
|
||||
)}
|
||||
{contact.timezone && (
|
||||
<div className="id-field">Timezone: {contact.timezone}</div>
|
||||
)}
|
||||
|
||||
{contact.safe_conversation_starters && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Safe con starters:</span> {contact.safe_conversation_starters}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.topics_to_avoid && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Topics to avoid:</span> {contact.topics_to_avoid}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.goals && (
|
||||
<div className="id-field-block">
|
||||
<span className="id-label">Goals:</span> {contact.goals}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right column - Bio and Relationships */}
|
||||
<div className="id-card-right">
|
||||
{contact.bio && (
|
||||
<div className="id-bio">
|
||||
<span className="id-label">Bio:</span> {contact.bio}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="id-relationships">
|
||||
<h2 className="id-section-title">Relationships</h2>
|
||||
|
||||
{relationshipGroups.familial.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Familial:</span>{" "}
|
||||
{relationshipGroups.familial.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.familial.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.partners.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Partners:</span>{" "}
|
||||
{relationshipGroups.partners.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
{i < relationshipGroups.partners.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.friends.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Friends:</span>{" "}
|
||||
{relationshipGroups.friends.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
{i < relationshipGroups.friends.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.professional.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Professional:</span>{" "}
|
||||
{relationshipGroups.professional.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.professional.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{relationshipGroups.other.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Other:</span>{" "}
|
||||
{relationshipGroups.other.map((rel, i) => (
|
||||
<span key={rel.related_contact_id}>
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="id-rel-type">({getRelationshipDisplayName(rel.relationship_type)})</span>
|
||||
{i < relationshipGroups.other.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.related_from.length > 0 && (
|
||||
<div className="id-rel-group">
|
||||
<span className="id-rel-label">Known by:</span>{" "}
|
||||
{contact.related_from.map((rel, i) => (
|
||||
<span key={rel.contact_id}>
|
||||
<Link to={`/contacts/${rel.contact_id}`}>
|
||||
{getContactName(rel.contact_id)}
|
||||
</Link>
|
||||
{i < contact.related_from.length - 1 && ", "}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Needs/Warnings at bottom */}
|
||||
{contact.needs.length > 0 && (
|
||||
<div className="id-card-warnings">
|
||||
{contact.needs.map((need) => (
|
||||
<div key={need.id} className="id-warning">
|
||||
<span className="warning-dot"></span>
|
||||
Warning: {need.name}
|
||||
{need.description && <span className="warning-desc"> - {need.description}</span>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Management section (expandable) */}
|
||||
<details className="id-card-manage">
|
||||
<summary>Manage Contact</summary>
|
||||
|
||||
<div className="manage-section">
|
||||
<h3>Manage Relationships</h3>
|
||||
<div className="manage-relationships">
|
||||
{contact.related_to.map((rel) => (
|
||||
<div key={rel.related_contact_id} className="manage-rel-item">
|
||||
<Link to={`/contacts/${rel.related_contact_id}`}>
|
||||
{getContactName(rel.related_contact_id)}
|
||||
</Link>
|
||||
<span className="tag">{getRelationshipDisplayName(rel.relationship_type)}</span>
|
||||
<label className="weight-control">
|
||||
<span>Closeness:</span>
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
value={rel.closeness_weight}
|
||||
onChange={(e) => handleUpdateWeight(rel.related_contact_id, Number(e.target.value))}
|
||||
/>
|
||||
<span className="weight-value">{rel.closeness_weight}</span>
|
||||
</label>
|
||||
<button
|
||||
onClick={() => handleRemoveRelationship(rel.related_contact_id)}
|
||||
className="btn btn-small btn-danger"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{allContacts.length > 0 && (
|
||||
<div className="add-form">
|
||||
<select
|
||||
value={newRelContactId}
|
||||
onChange={(e) =>
|
||||
setNewRelContactId(
|
||||
e.target.value ? Number(e.target.value) : ""
|
||||
)
|
||||
}
|
||||
>
|
||||
<option value="">Select contact...</option>
|
||||
{allContacts.map((c) => (
|
||||
<option key={c.id} value={c.id}>
|
||||
{c.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={newRelType}
|
||||
onChange={(e) => setNewRelType(e.target.value as RelationshipTypeValue | "")}
|
||||
>
|
||||
<option value="">Select relationship type...</option>
|
||||
{RELATIONSHIP_TYPES.map((rt) => (
|
||||
<option key={rt.value} value={rt.value}>
|
||||
{rt.displayName}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleAddRelationship} className="btn btn-primary">
|
||||
Add Relationship
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="manage-section">
|
||||
<h3>Manage Needs/Warnings</h3>
|
||||
<ul className="manage-needs-list">
|
||||
{contact.needs.map((need) => (
|
||||
<li key={need.id}>
|
||||
<strong>{need.name}</strong>
|
||||
{need.description && <span> - {need.description}</span>}
|
||||
<button
|
||||
onClick={() => handleRemoveNeed(need.id)}
|
||||
className="btn btn-small btn-danger"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{availableNeeds.length > 0 && (
|
||||
<div className="add-form">
|
||||
<select
|
||||
value={newNeedId}
|
||||
onChange={(e) =>
|
||||
setNewNeedId(e.target.value ? Number(e.target.value) : "")
|
||||
}
|
||||
>
|
||||
<option value="">Select a need...</option>
|
||||
{availableNeeds.map((n) => (
|
||||
<option key={n.id} value={n.id}>
|
||||
{n.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<button onClick={handleAddNeed} className="btn btn-primary">
|
||||
Add Need
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,325 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { ContactCreate, Need } from "../types";
|
||||
|
||||
export function ContactForm() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const isEdit = Boolean(id);
|
||||
|
||||
const [allNeeds, setAllNeeds] = useState<Need[]>([]);
|
||||
const [loading, setLoading] = useState(isEdit);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [form, setForm] = useState<ContactCreate>({
|
||||
name: "",
|
||||
age: null,
|
||||
bio: null,
|
||||
current_job: null,
|
||||
gender: null,
|
||||
goals: null,
|
||||
legal_name: null,
|
||||
profile_pic: null,
|
||||
safe_conversation_starters: null,
|
||||
self_sufficiency_score: null,
|
||||
social_structure_style: null,
|
||||
ssn: null,
|
||||
suffix: null,
|
||||
timezone: null,
|
||||
topics_to_avoid: null,
|
||||
need_ids: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const needs = await api.needs.list();
|
||||
setAllNeeds(needs);
|
||||
|
||||
if (id) {
|
||||
const contact = await api.contacts.get(Number(id));
|
||||
setForm({
|
||||
name: contact.name,
|
||||
age: contact.age,
|
||||
bio: contact.bio,
|
||||
current_job: contact.current_job,
|
||||
gender: contact.gender,
|
||||
goals: contact.goals,
|
||||
legal_name: contact.legal_name,
|
||||
profile_pic: contact.profile_pic,
|
||||
safe_conversation_starters: contact.safe_conversation_starters,
|
||||
self_sufficiency_score: contact.self_sufficiency_score,
|
||||
social_structure_style: contact.social_structure_style,
|
||||
ssn: contact.ssn,
|
||||
suffix: contact.suffix,
|
||||
timezone: contact.timezone,
|
||||
topics_to_avoid: contact.topics_to_avoid,
|
||||
need_ids: contact.needs.map((n) => n.id),
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Failed to load data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
loadData();
|
||||
}, [id]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
if (isEdit) {
|
||||
await api.contacts.update(Number(id), form);
|
||||
navigate(`/contacts/${id}`);
|
||||
} else {
|
||||
const created = await api.contacts.create(form);
|
||||
navigate(`/contacts/${created.id}`);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Save failed");
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateField = <K extends keyof ContactCreate>(
|
||||
field: K,
|
||||
value: ContactCreate[K]
|
||||
) => {
|
||||
setForm((prev) => ({ ...prev, [field]: value }));
|
||||
};
|
||||
|
||||
const toggleNeed = (needId: number) => {
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
need_ids: prev.need_ids?.includes(needId)
|
||||
? prev.need_ids.filter((id) => id !== needId)
|
||||
: [...(prev.need_ids || []), needId],
|
||||
}));
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="contact-form">
|
||||
<h1>{isEdit ? "Edit Contact" : "New Contact"}</h1>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => updateField("name", e.target.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="legal_name">Legal Name</label>
|
||||
<input
|
||||
id="legal_name"
|
||||
type="text"
|
||||
value={form.legal_name || ""}
|
||||
onChange={(e) =>
|
||||
updateField("legal_name", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="suffix">Suffix</label>
|
||||
<input
|
||||
id="suffix"
|
||||
type="text"
|
||||
value={form.suffix || ""}
|
||||
onChange={(e) => updateField("suffix", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-row">
|
||||
<div className="form-group">
|
||||
<label htmlFor="age">Age</label>
|
||||
<input
|
||||
id="age"
|
||||
type="number"
|
||||
value={form.age ?? ""}
|
||||
onChange={(e) =>
|
||||
updateField("age", e.target.value ? Number(e.target.value) : null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="gender">Gender</label>
|
||||
<input
|
||||
id="gender"
|
||||
type="text"
|
||||
value={form.gender || ""}
|
||||
onChange={(e) => updateField("gender", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="current_job">Current Job</label>
|
||||
<input
|
||||
id="current_job"
|
||||
type="text"
|
||||
value={form.current_job || ""}
|
||||
onChange={(e) =>
|
||||
updateField("current_job", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="timezone">Timezone</label>
|
||||
<input
|
||||
id="timezone"
|
||||
type="text"
|
||||
value={form.timezone || ""}
|
||||
onChange={(e) => updateField("timezone", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="profile_pic">Profile Picture URL</label>
|
||||
<input
|
||||
id="profile_pic"
|
||||
type="url"
|
||||
placeholder="https://example.com/photo.jpg"
|
||||
value={form.profile_pic || ""}
|
||||
onChange={(e) => updateField("profile_pic", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="bio">Bio</label>
|
||||
<textarea
|
||||
id="bio"
|
||||
value={form.bio || ""}
|
||||
onChange={(e) => updateField("bio", e.target.value || null)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="goals">Goals</label>
|
||||
<textarea
|
||||
id="goals"
|
||||
value={form.goals || ""}
|
||||
onChange={(e) => updateField("goals", e.target.value || null)}
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="social_structure_style">Social Structure Style</label>
|
||||
<input
|
||||
id="social_structure_style"
|
||||
type="text"
|
||||
value={form.social_structure_style || ""}
|
||||
onChange={(e) =>
|
||||
updateField("social_structure_style", e.target.value || null)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="self_sufficiency_score">
|
||||
Self-Sufficiency Score (1-10)
|
||||
</label>
|
||||
<input
|
||||
id="self_sufficiency_score"
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
value={form.self_sufficiency_score ?? ""}
|
||||
onChange={(e) =>
|
||||
updateField(
|
||||
"self_sufficiency_score",
|
||||
e.target.value ? Number(e.target.value) : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="safe_conversation_starters">
|
||||
Safe Conversation Starters
|
||||
</label>
|
||||
<textarea
|
||||
id="safe_conversation_starters"
|
||||
value={form.safe_conversation_starters || ""}
|
||||
onChange={(e) =>
|
||||
updateField("safe_conversation_starters", e.target.value || null)
|
||||
}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="topics_to_avoid">Topics to Avoid</label>
|
||||
<textarea
|
||||
id="topics_to_avoid"
|
||||
value={form.topics_to_avoid || ""}
|
||||
onChange={(e) =>
|
||||
updateField("topics_to_avoid", e.target.value || null)
|
||||
}
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<label htmlFor="ssn">SSN</label>
|
||||
<input
|
||||
id="ssn"
|
||||
type="text"
|
||||
value={form.ssn || ""}
|
||||
onChange={(e) => updateField("ssn", e.target.value || null)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{allNeeds.length > 0 && (
|
||||
<div className="form-group">
|
||||
<label>Needs/Accommodations</label>
|
||||
<div className="checkbox-group">
|
||||
{allNeeds.map((need) => (
|
||||
<label key={need.id} className="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.need_ids?.includes(need.id) || false}
|
||||
onChange={() => toggleNeed(need.id)}
|
||||
/>
|
||||
{need.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn btn-primary" disabled={submitting}>
|
||||
{submitting ? "Saving..." : "Save"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn"
|
||||
onClick={() => navigate(isEdit ? `/contacts/${id}` : "/contacts")}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { api } from "../api/client";
|
||||
import type { ContactListItem } from "../types";
|
||||
|
||||
export function ContactList() {
|
||||
const [contacts, setContacts] = useState<ContactListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
api.contacts
|
||||
.list()
|
||||
.then(setContacts)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("Delete this contact?")) return;
|
||||
try {
|
||||
await api.contacts.delete(id);
|
||||
setContacts((prev) => prev.filter((c) => c.id !== id));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (error) return <div className="error">Error: {error}</div>;
|
||||
|
||||
return (
|
||||
<div className="contact-list">
|
||||
<div className="header">
|
||||
<h1>Contacts</h1>
|
||||
<Link to="/contacts/new" className="btn btn-primary">
|
||||
Add Contact
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{contacts.length === 0 ? (
|
||||
<p>No contacts yet.</p>
|
||||
) : (
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Job</th>
|
||||
<th>Timezone</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{contacts.map((contact) => (
|
||||
<tr key={contact.id}>
|
||||
<td>
|
||||
<Link to={`/contacts/${contact.id}`}>{contact.name}</Link>
|
||||
</td>
|
||||
<td>{contact.current_job || "-"}</td>
|
||||
<td>{contact.timezone || "-"}</td>
|
||||
<td>
|
||||
<Link to={`/contacts/${contact.id}/edit`} className="btn">
|
||||
Edit
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => handleDelete(contact.id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api } from "../api/client";
|
||||
import type { Need, NeedCreate } from "../types";
|
||||
|
||||
export function NeedList() {
|
||||
const [needs, setNeeds] = useState<Need[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [form, setForm] = useState<NeedCreate>({ name: "", description: null });
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
api.needs
|
||||
.list()
|
||||
.then(setNeeds)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!form.name.trim()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const created = await api.needs.create(form);
|
||||
setNeeds((prev) => [...prev, created]);
|
||||
setForm({ name: "", description: null });
|
||||
setShowForm(false);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Create failed");
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("Delete this need?")) return;
|
||||
try {
|
||||
await api.needs.delete(id);
|
||||
setNeeds((prev) => prev.filter((n) => n.id !== id));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Delete failed");
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="need-list">
|
||||
<div className="header">
|
||||
<h1>Needs / Accommodations</h1>
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
className="btn btn-primary"
|
||||
>
|
||||
{showForm ? "Cancel" : "Add Need"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <div className="error">{error}</div>}
|
||||
|
||||
{showForm && (
|
||||
<form onSubmit={handleSubmit} className="need-form">
|
||||
<div className="form-group">
|
||||
<label htmlFor="name">Name *</label>
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
placeholder="e.g., Light Sensitive, ADHD"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label htmlFor="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
value={form.description || ""}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, description: e.target.value || null })
|
||||
}
|
||||
placeholder="Optional description..."
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn btn-primary" disabled={submitting}>
|
||||
{submitting ? "Creating..." : "Create"}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
{needs.length === 0 ? (
|
||||
<p>No needs defined yet.</p>
|
||||
) : (
|
||||
<ul className="need-items">
|
||||
{needs.map((need) => (
|
||||
<li key={need.id}>
|
||||
<div className="need-info">
|
||||
<strong>{need.name}</strong>
|
||||
{need.description && <p>{need.description}</p>}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(need.id)}
|
||||
className="btn btn-danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,330 +0,0 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { api } from "../api/client";
|
||||
import type { GraphData, GraphEdge, GraphNode } from "../types";
|
||||
import { RELATIONSHIP_TYPES } from "../types";
|
||||
|
||||
interface SimNode extends GraphNode {
|
||||
x: number;
|
||||
y: number;
|
||||
vx: number;
|
||||
vy: number;
|
||||
}
|
||||
|
||||
interface SimEdge extends GraphEdge {
|
||||
sourceNode: SimNode;
|
||||
targetNode: SimNode;
|
||||
}
|
||||
|
||||
export function RelationshipGraph() {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [data, setData] = useState<GraphData | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedNode, setSelectedNode] = useState<SimNode | null>(null);
|
||||
const nodesRef = useRef<SimNode[]>([]);
|
||||
const edgesRef = useRef<SimEdge[]>([]);
|
||||
const dragNodeRef = useRef<SimNode | null>(null);
|
||||
const animationRef = useRef<number>(0);
|
||||
|
||||
useEffect(() => {
|
||||
api.graph.get()
|
||||
.then(setData)
|
||||
.catch((err) => setError(err.message))
|
||||
.finally(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data || !canvasRef.current) return;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const maybeCtx = canvas.getContext("2d");
|
||||
if (!maybeCtx) return;
|
||||
const ctx: CanvasRenderingContext2D = maybeCtx;
|
||||
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
|
||||
// Initialize nodes with random positions
|
||||
const nodes: SimNode[] = data.nodes.map((node) => ({
|
||||
...node,
|
||||
x: centerX + (Math.random() - 0.5) * 300,
|
||||
y: centerY + (Math.random() - 0.5) * 300,
|
||||
vx: 0,
|
||||
vy: 0,
|
||||
}));
|
||||
nodesRef.current = nodes;
|
||||
|
||||
const nodeMap = new Map(nodes.map((n) => [n.id, n]));
|
||||
|
||||
// Create edges with node references
|
||||
const edges: SimEdge[] = data.edges
|
||||
.map((edge) => {
|
||||
const sourceNode = nodeMap.get(edge.source);
|
||||
const targetNode = nodeMap.get(edge.target);
|
||||
if (!sourceNode || !targetNode) return null;
|
||||
return { ...edge, sourceNode, targetNode };
|
||||
})
|
||||
.filter((e): e is SimEdge => e !== null);
|
||||
edgesRef.current = edges;
|
||||
|
||||
// Force simulation parameters
|
||||
const repulsion = 5000;
|
||||
const springStrength = 0.05;
|
||||
const baseSpringLength = 150;
|
||||
const damping = 0.9;
|
||||
const centerPull = 0.01;
|
||||
|
||||
function simulate() {
|
||||
const nodes = nodesRef.current;
|
||||
const edges = edgesRef.current;
|
||||
|
||||
// Reset forces
|
||||
for (const node of nodes) {
|
||||
node.vx = 0;
|
||||
node.vy = 0;
|
||||
}
|
||||
|
||||
// Repulsion between all nodes
|
||||
for (let i = 0; i < nodes.length; i++) {
|
||||
for (let j = i + 1; j < nodes.length; j++) {
|
||||
const dx = nodes[j].x - nodes[i].x;
|
||||
const dy = nodes[j].y - nodes[i].y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
const force = repulsion / (dist * dist);
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
nodes[i].vx -= fx;
|
||||
nodes[i].vy -= fy;
|
||||
nodes[j].vx += fx;
|
||||
nodes[j].vy += fy;
|
||||
}
|
||||
}
|
||||
|
||||
// Spring forces for edges - closer relationships = shorter springs
|
||||
// Weight is 1-10, normalize to 0-1 for calculations
|
||||
for (const edge of edges) {
|
||||
const dx = edge.targetNode.x - edge.sourceNode.x;
|
||||
const dy = edge.targetNode.y - edge.sourceNode.y;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy) || 1;
|
||||
// Higher weight (1-10) = shorter ideal length
|
||||
// Normalize: weight 10 -> 0.5x length, weight 1 -> 1.4x length
|
||||
const normalizedWeight = edge.closeness_weight / 10;
|
||||
const idealLength = baseSpringLength * (1.5 - normalizedWeight);
|
||||
const displacement = dist - idealLength;
|
||||
const force = springStrength * displacement;
|
||||
const fx = (dx / dist) * force;
|
||||
const fy = (dy / dist) * force;
|
||||
edge.sourceNode.vx += fx;
|
||||
edge.sourceNode.vy += fy;
|
||||
edge.targetNode.vx -= fx;
|
||||
edge.targetNode.vy -= fy;
|
||||
}
|
||||
|
||||
// Pull toward center
|
||||
for (const node of nodes) {
|
||||
node.vx += (centerX - node.x) * centerPull;
|
||||
node.vy += (centerY - node.y) * centerPull;
|
||||
}
|
||||
|
||||
// Apply velocities with damping (skip dragged node)
|
||||
for (const node of nodes) {
|
||||
if (node === dragNodeRef.current) continue;
|
||||
node.x += node.vx * damping;
|
||||
node.y += node.vy * damping;
|
||||
// Keep within bounds
|
||||
node.x = Math.max(30, Math.min(width - 30, node.x));
|
||||
node.y = Math.max(30, Math.min(height - 30, node.y));
|
||||
}
|
||||
}
|
||||
|
||||
function getEdgeColor(weight: number): string {
|
||||
// Interpolate from light gray (distant) to dark blue (close)
|
||||
// weight is 1-10, normalize to 0-1
|
||||
const normalized = weight / 10;
|
||||
const hue = 220;
|
||||
const saturation = 70;
|
||||
const lightness = 80 - normalized * 40;
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
}
|
||||
|
||||
function draw(context: CanvasRenderingContext2D) {
|
||||
const nodes = nodesRef.current;
|
||||
const edges = edgesRef.current;
|
||||
|
||||
context.clearRect(0, 0, width, height);
|
||||
|
||||
// Draw edges
|
||||
for (const edge of edges) {
|
||||
// Weight is 1-10, scale line width accordingly
|
||||
const lineWidth = 1 + (edge.closeness_weight / 10) * 3;
|
||||
context.strokeStyle = getEdgeColor(edge.closeness_weight);
|
||||
context.lineWidth = lineWidth;
|
||||
context.beginPath();
|
||||
context.moveTo(edge.sourceNode.x, edge.sourceNode.y);
|
||||
context.lineTo(edge.targetNode.x, edge.targetNode.y);
|
||||
context.stroke();
|
||||
|
||||
// Draw relationship type label at midpoint
|
||||
const midX = (edge.sourceNode.x + edge.targetNode.x) / 2;
|
||||
const midY = (edge.sourceNode.y + edge.targetNode.y) / 2;
|
||||
context.fillStyle = "#666";
|
||||
context.font = "10px sans-serif";
|
||||
context.textAlign = "center";
|
||||
const typeInfo = RELATIONSHIP_TYPES.find(t => t.value === edge.relationship_type);
|
||||
const label = typeInfo?.displayName || edge.relationship_type;
|
||||
context.fillText(label, midX, midY - 5);
|
||||
}
|
||||
|
||||
// Draw nodes
|
||||
for (const node of nodes) {
|
||||
const isSelected = node === selectedNode;
|
||||
const radius = isSelected ? 25 : 20;
|
||||
|
||||
// Node circle
|
||||
context.beginPath();
|
||||
context.arc(node.x, node.y, radius, 0, Math.PI * 2);
|
||||
context.fillStyle = isSelected ? "#0066cc" : "#fff";
|
||||
context.fill();
|
||||
context.strokeStyle = "#0066cc";
|
||||
context.lineWidth = 2;
|
||||
context.stroke();
|
||||
|
||||
// Node label
|
||||
context.fillStyle = isSelected ? "#fff" : "#333";
|
||||
context.font = "12px sans-serif";
|
||||
context.textAlign = "center";
|
||||
context.textBaseline = "middle";
|
||||
const name = node.name.length > 10 ? node.name.slice(0, 9) + "…" : node.name;
|
||||
context.fillText(name, node.x, node.y);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
simulate();
|
||||
draw(ctx);
|
||||
animationRef.current = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animationRef.current);
|
||||
};
|
||||
}, [data, selectedNode]);
|
||||
|
||||
// Mouse interaction handlers
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
function getNodeAtPosition(x: number, y: number): SimNode | null {
|
||||
for (const node of nodesRef.current) {
|
||||
const dx = x - node.x;
|
||||
const dy = y - node.y;
|
||||
if (dx * dx + dy * dy < 400) {
|
||||
return node;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
const rect = canvas!.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
const node = getNodeAtPosition(x, y);
|
||||
if (node) {
|
||||
dragNodeRef.current = node;
|
||||
setSelectedNode(node);
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (!dragNodeRef.current) return;
|
||||
const rect = canvas!.getBoundingClientRect();
|
||||
dragNodeRef.current.x = e.clientX - rect.left;
|
||||
dragNodeRef.current.y = e.clientY - rect.top;
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
dragNodeRef.current = null;
|
||||
}
|
||||
|
||||
canvas.addEventListener("mousedown", handleMouseDown);
|
||||
canvas.addEventListener("mousemove", handleMouseMove);
|
||||
canvas.addEventListener("mouseup", handleMouseUp);
|
||||
canvas.addEventListener("mouseleave", handleMouseUp);
|
||||
|
||||
return () => {
|
||||
canvas.removeEventListener("mousedown", handleMouseDown);
|
||||
canvas.removeEventListener("mousemove", handleMouseMove);
|
||||
canvas.removeEventListener("mouseup", handleMouseUp);
|
||||
canvas.removeEventListener("mouseleave", handleMouseUp);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (loading) return <p>Loading graph...</p>;
|
||||
if (error) return <div className="error">{error}</div>;
|
||||
if (!data) return <p>No data available</p>;
|
||||
|
||||
return (
|
||||
<div className="graph-container">
|
||||
<div className="header">
|
||||
<h1>Relationship Graph</h1>
|
||||
</div>
|
||||
<p className="graph-hint">
|
||||
Drag nodes to reposition. Closer relationships have shorter, darker edges.
|
||||
</p>
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={900}
|
||||
height={600}
|
||||
style={{
|
||||
border: "1px solid var(--color-border)",
|
||||
borderRadius: "8px",
|
||||
background: "var(--color-bg)",
|
||||
cursor: "grab",
|
||||
}}
|
||||
/>
|
||||
{selectedNode && (
|
||||
<div className="selected-info">
|
||||
<h3>{selectedNode.name}</h3>
|
||||
{selectedNode.current_job && <p>Job: {selectedNode.current_job}</p>}
|
||||
<a href={`/contacts/${selectedNode.id}`}>View details</a>
|
||||
</div>
|
||||
)}
|
||||
<div className="legend">
|
||||
<h4>Relationship Closeness (1-10)</h4>
|
||||
<div className="legend-items">
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(10), height: "4px" }}></span>
|
||||
<span>10 - Very Close (Spouse, Partner)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(7), height: "3px" }}></span>
|
||||
<span>7 - Close (Family, Best Friend)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(4), height: "2px" }}></span>
|
||||
<span>4 - Moderate (Friend, Colleague)</span>
|
||||
</div>
|
||||
<div className="legend-item">
|
||||
<span className="legend-line" style={{ background: getEdgeColorCSS(2), height: "1px" }}></span>
|
||||
<span>2 - Distant (Acquaintance)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getEdgeColorCSS(weight: number): string {
|
||||
// weight is 1-10, normalize to 0-1
|
||||
const normalized = weight / 10;
|
||||
const hue = 220;
|
||||
const saturation = 70;
|
||||
const lightness = 80 - normalized * 40;
|
||||
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
:root {
|
||||
/* Light theme (default) */
|
||||
--color-bg: #f5f5f5;
|
||||
--color-bg-card: #ffffff;
|
||||
--color-bg-hover: #f0f0f0;
|
||||
--color-bg-muted: #f9f9f9;
|
||||
--color-bg-error: #ffe0e0;
|
||||
|
||||
--color-text: #333333;
|
||||
--color-text-muted: #666666;
|
||||
--color-text-error: #cc0000;
|
||||
|
||||
--color-border: #dddddd;
|
||||
--color-border-light: #eeeeee;
|
||||
--color-border-lighter: #f0f0f0;
|
||||
|
||||
--color-primary: #0066cc;
|
||||
--color-primary-hover: #0055aa;
|
||||
|
||||
--color-danger: #cc3333;
|
||||
--color-danger-hover: #aa2222;
|
||||
|
||||
--color-tag-bg: #e0e0e0;
|
||||
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--color-bg: #1a1a1a;
|
||||
--color-bg-card: #2d2d2d;
|
||||
--color-bg-hover: #3d3d3d;
|
||||
--color-bg-muted: #252525;
|
||||
--color-bg-error: #4a2020;
|
||||
|
||||
--color-text: #e0e0e0;
|
||||
--color-text-muted: #a0a0a0;
|
||||
--color-text-error: #ff6b6b;
|
||||
|
||||
--color-border: #404040;
|
||||
--color-border-light: #353535;
|
||||
--color-border-lighter: #303030;
|
||||
|
||||
--color-primary: #4da6ff;
|
||||
--color-primary-hover: #7dbfff;
|
||||
|
||||
--color-danger: #ff6b6b;
|
||||
--color-danger-hover: #ff8a8a;
|
||||
|
||||
--color-tag-bg: #404040;
|
||||
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import App from "./App.tsx";
|
||||
import "./index.css";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -1,155 +0,0 @@
|
||||
export interface Need {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
export interface NeedCreate {
|
||||
name: string;
|
||||
description?: string | null;
|
||||
}
|
||||
|
||||
export const RELATIONSHIP_TYPES = [
|
||||
{ value: 'spouse', displayName: 'Spouse', defaultWeight: 10 },
|
||||
{ value: 'partner', displayName: 'Partner', defaultWeight: 10 },
|
||||
{ value: 'parent', displayName: 'Parent', defaultWeight: 9 },
|
||||
{ value: 'child', displayName: 'Child', defaultWeight: 9 },
|
||||
{ value: 'sibling', displayName: 'Sibling', defaultWeight: 9 },
|
||||
{ value: 'best_friend', displayName: 'Best Friend', defaultWeight: 8 },
|
||||
{ value: 'grandparent', displayName: 'Grandparent', defaultWeight: 7 },
|
||||
{ value: 'grandchild', displayName: 'Grandchild', defaultWeight: 7 },
|
||||
{ value: 'aunt_uncle', displayName: 'Aunt/Uncle', defaultWeight: 7 },
|
||||
{ value: 'niece_nephew', displayName: 'Niece/Nephew', defaultWeight: 7 },
|
||||
{ value: 'cousin', displayName: 'Cousin', defaultWeight: 7 },
|
||||
{ value: 'in_law', displayName: 'In-Law', defaultWeight: 7 },
|
||||
{ value: 'close_friend', displayName: 'Close Friend', defaultWeight: 6 },
|
||||
{ value: 'friend', displayName: 'Friend', defaultWeight: 6 },
|
||||
{ value: 'mentor', displayName: 'Mentor', defaultWeight: 5 },
|
||||
{ value: 'mentee', displayName: 'Mentee', defaultWeight: 5 },
|
||||
{ value: 'business_partner', displayName: 'Business Partner', defaultWeight: 5 },
|
||||
{ value: 'colleague', displayName: 'Colleague', defaultWeight: 4 },
|
||||
{ value: 'manager', displayName: 'Manager', defaultWeight: 4 },
|
||||
{ value: 'direct_report', displayName: 'Direct Report', defaultWeight: 4 },
|
||||
{ value: 'client', displayName: 'Client', defaultWeight: 4 },
|
||||
{ value: 'acquaintance', displayName: 'Acquaintance', defaultWeight: 3 },
|
||||
{ value: 'neighbor', displayName: 'Neighbor', defaultWeight: 3 },
|
||||
{ value: 'ex', displayName: 'Ex', defaultWeight: 2 },
|
||||
{ value: 'other', displayName: 'Other', defaultWeight: 2 },
|
||||
] as const;
|
||||
|
||||
export type RelationshipTypeValue = typeof RELATIONSHIP_TYPES[number]['value'];
|
||||
|
||||
export interface ContactRelationship {
|
||||
contact_id: number;
|
||||
related_contact_id: number;
|
||||
relationship_type: string;
|
||||
closeness_weight: number;
|
||||
}
|
||||
|
||||
export interface ContactRelationshipCreate {
|
||||
related_contact_id: number;
|
||||
relationship_type: RelationshipTypeValue;
|
||||
closeness_weight?: number;
|
||||
}
|
||||
|
||||
export interface ContactRelationshipUpdate {
|
||||
relationship_type?: RelationshipTypeValue;
|
||||
closeness_weight?: number;
|
||||
}
|
||||
|
||||
export interface GraphNode {
|
||||
id: number;
|
||||
name: string;
|
||||
current_job: string | null;
|
||||
}
|
||||
|
||||
export interface GraphEdge {
|
||||
source: number;
|
||||
target: number;
|
||||
relationship_type: string;
|
||||
closeness_weight: number;
|
||||
}
|
||||
|
||||
export interface GraphData {
|
||||
nodes: GraphNode[];
|
||||
edges: GraphEdge[];
|
||||
}
|
||||
|
||||
export interface Contact {
|
||||
id: number;
|
||||
name: string;
|
||||
age: number | null;
|
||||
bio: string | null;
|
||||
current_job: string | null;
|
||||
gender: string | null;
|
||||
goals: string | null;
|
||||
legal_name: string | null;
|
||||
profile_pic: string | null;
|
||||
safe_conversation_starters: string | null;
|
||||
self_sufficiency_score: number | null;
|
||||
social_structure_style: string | null;
|
||||
ssn: string | null;
|
||||
suffix: string | null;
|
||||
timezone: string | null;
|
||||
topics_to_avoid: string | null;
|
||||
needs: Need[];
|
||||
related_to: ContactRelationship[];
|
||||
related_from: ContactRelationship[];
|
||||
}
|
||||
|
||||
export interface ContactListItem {
|
||||
id: number;
|
||||
name: string;
|
||||
age: number | null;
|
||||
bio: string | null;
|
||||
current_job: string | null;
|
||||
gender: string | null;
|
||||
goals: string | null;
|
||||
legal_name: string | null;
|
||||
profile_pic: string | null;
|
||||
safe_conversation_starters: string | null;
|
||||
self_sufficiency_score: number | null;
|
||||
social_structure_style: string | null;
|
||||
ssn: string | null;
|
||||
suffix: string | null;
|
||||
timezone: string | null;
|
||||
topics_to_avoid: string | null;
|
||||
}
|
||||
|
||||
export interface ContactCreate {
|
||||
name: string;
|
||||
age?: number | null;
|
||||
bio?: string | null;
|
||||
current_job?: string | null;
|
||||
gender?: string | null;
|
||||
goals?: string | null;
|
||||
legal_name?: string | null;
|
||||
profile_pic?: string | null;
|
||||
safe_conversation_starters?: string | null;
|
||||
self_sufficiency_score?: number | null;
|
||||
social_structure_style?: string | null;
|
||||
ssn?: string | null;
|
||||
suffix?: string | null;
|
||||
timezone?: string | null;
|
||||
topics_to_avoid?: string | null;
|
||||
need_ids?: number[];
|
||||
}
|
||||
|
||||
export interface ContactUpdate {
|
||||
name?: string | null;
|
||||
age?: number | null;
|
||||
bio?: string | null;
|
||||
current_job?: string | null;
|
||||
gender?: string | null;
|
||||
goals?: string | null;
|
||||
legal_name?: string | null;
|
||||
profile_pic?: string | null;
|
||||
safe_conversation_starters?: string | null;
|
||||
self_sufficiency_score?: number | null;
|
||||
social_structure_style?: string | null;
|
||||
ssn?: string | null;
|
||||
suffix?: string | null;
|
||||
timezone?: string | null;
|
||||
topics_to_avoid?: string | null;
|
||||
need_ids?: number[] | null;
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
proxy: {
|
||||
"/api": "http://localhost:8000",
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user