diff --git a/src/.gitignore b/src/.gitignore new file mode 100644 index 00000000..5ef6a520 --- /dev/null +++ b/src/.gitignore @@ -0,0 +1,41 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/src/CONVERSION_STATUS.md b/src/CONVERSION_STATUS.md new file mode 100644 index 00000000..87f41504 --- /dev/null +++ b/src/CONVERSION_STATUS.md @@ -0,0 +1,126 @@ +# Angular to React/Next.js Conversion Status + +## Completed + +### Core Infrastructure +- ✅ Next.js 16 setup with TypeScript +- ✅ MUI (Material-UI) theme provider configured +- ✅ App router structure established +- ✅ All business logic migrated (dive planner service, algorithms, models) +- ✅ Application Insights service ported +- ✅ React Context provider for dive planner state +- ✅ Build system working successfully + +### Pages Converted +- ✅ Home page (`/`) - with YouTube embed and GitHub links +- ⏳ New Dive page (`/new-dive`) - placeholder created, needs full implementation + +## Remaining Work + +### Components to Convert (from Angular to React) + +The following Angular components need to be converted to React functional components with MUI: + +#### Core Pages +- [ ] `new-dive` - Gas selection and dive configuration +- [ ] `dive-overview` - Main dive view with all charts and segments +- [ ] `change-depth` - Change depth segment +- [ ] `change-gas` - Change gas segment +- [ ] `maintain-depth` - Maintain depth segment + +#### Display Components +- [ ] `dive-plan` - Dive segments list +- [ ] `dive-summary` - Summary statistics +- [ ] `current-stats` - Current dive statistics +- [ ] `error-list` - Validation errors display + +#### Input Components +- [ ] `standard-gas-list` - Standard gas selection list +- [ ] `custom-gas-input` - Custom gas input form +- [ ] `new-gas-input` - New gas input for segments +- [ ] `dive-settings` - Dive settings configuration + +#### Stats Components +- [ ] `start-gas-stats` - Starting gas statistics +- [ ] `new-depth-stats` - New depth statistics +- [ ] `new-gas-stats` - New gas statistics +- [ ] `new-time-stats` - New time statistics + +#### Chart Components (using plotly.js) +- [ ] `depth-chart` - Depth over time chart +- [ ] `po2-chart` - PO2 levels chart +- [ ] `end-chart` - END (Equivalent Narcotic Depth) chart +- [ ] `ceiling-chart` - Ceiling chart +- [ ] `tissues-ceiling-chart` - Tissue ceilings chart +- [ ] `tissues-pn2-chart` - Tissue PN2 chart +- [ ] `tissues-phe-chart` - Tissue PHe chart +- [ ] `graph-dialog` - Chart dialog modal + +### Angular to React Conversion Pattern + +For each component, follow this pattern: + +1. **Convert Component Class to Function Component** + ```typescript + // Angular + @Component({...}) + export class MyComponent { + constructor(private service: Service) {} + } + + // React + 'use client'; + export default function MyComponent() { + const service = useService(); + } + ``` + +2. **Replace Angular Template with JSX** + - `*ngIf` → `{condition &&