@openmrs/esm-report-builder 0.1.1-pre.101

package/src/components/legacy-reports/tabs/legacy-report-json-preview-tab.component.tsx

@@ -0,0 +1,272 @@
+import React from 'react';
+import {
+  Tile,
+  Button,
+  Stack,
+  CodeSnippet,
+  InlineNotification,
+  StructuredListBody,
+  StructuredListRow,
+  StructuredListCell,
+  Tag,
+  Grid,
+  Column,
+} from '@carbon/react';
+import { Download, Copy, Checkmark } from '@carbon/icons-react';
+import type { LegacyReportConfig } from '../legacy-report-editor-page.component';
+
+type Props = {
+  report: LegacyReportConfig;
+  onChange: (report: LegacyReportConfig) => void;
+};
+
+const LegacyReportJsonPreviewTab: React.FC<Props> = ({ report }) => {
+  const [copied, setCopied] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleCopyToClipboard = () => {
+    try {
+      const json = JSON.stringify(report, null, 2);
+      navigator.clipboard.writeText(json);
+      setCopied(true);
+      setError(null);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      setError('Failed to copy to clipboard');
+      console.error('Copy failed:', err);
+    }
+  };
+
+  const handleDownloadJson = () => {
+    try {
+      const json = JSON.stringify(report, null, 2);
+      const blob = new Blob([json], { type: 'application/json' });
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `${report.name.replace(/\s+/g, '_') || 'legacy_report'}-${Date.now()}.json`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+      setError(null);
+    } catch (err) {
+      setError('Failed to download JSON file');
+      console.error('Download failed:', err);
+    }
+  };
+
+  const validateReport = () => {
+    const validationErrors = [];
+
+    if (!report.name?.trim()) {
+      validationErrors.push('Report name is required');
+    }
+
+    if (!report.parameters || report.parameters.length === 0) {
+      validationErrors.push('At least one parameter is required');
+    }
+
+    if (!report.advancedFeatures?.indicatorDataSet?.indicators?.length) {
+      validationErrors.push('At least one indicator is required');
+    }
+
+    // Validate indicators
+    report.advancedFeatures?.indicatorDataSet?.indicators?.forEach((ind, index) => {
+      if (!ind.key?.trim()) {
+        validationErrors.push(`Indicator at index ${index} is missing a key`);
+      }
+
+      if (ind.type === 'BASE' && !ind.sqlQuery?.trim()) {
+        validationErrors.push(`Indicator "${ind.key}" is missing SQL query`);
+      }
+
+      if (ind.type === 'COMPOSITE' && !ind.formula?.trim()) {
+        validationErrors.push(`Indicator "${ind.key}" is missing formula`);
+      }
+
+      if (ind.type === 'TEMPORAL' && !ind.baseIndicator?.trim()) {
+        validationErrors.push(`Indicator "${ind.key}" is missing base indicator reference`);
+      }
+    });
+
+    // Validate datasets
+    report.dataSetDefinitions?.forEach((ds, index) => {
+      if (!ds.name?.trim()) {
+        validationErrors.push(`Dataset at index ${index} is missing a name`);
+      }
+
+      if (ds.type === 'SQL_DATA_SET' && !ds.config?.sql?.trim()) {
+        validationErrors.push(`Dataset "${ds.name}" is missing SQL query`);
+      }
+    });
+
+    return validationErrors;
+  };
+
+  const validationErrors = validateReport();
+  const isValid = validationErrors.length === 0;
+
+  const getReportStats = () => {
+    const indicators = report.advancedFeatures?.indicatorDataSet?.indicators || [];
+    const dimensions = report.advancedFeatures?.indicatorDataSet?.dimensionDefinitions || [];
+    const datasets = report.dataSetDefinitions || [];
+
+    return {
+      baseIndicators: indicators.filter((ind) => ind.type === 'BASE').length,
+      compositeIndicators: indicators.filter((ind) => ind.type === 'COMPOSITE').length,
+      temporalIndicators: indicators.filter((ind) => ind.type === 'TEMPORAL').length,
+      totalIndicators: indicators.length,
+      dimensions: dimensions.length,
+      datasets: datasets.length,
+      parameters: report.parameters?.length || 0,
+    };
+  };
+
+  const stats = getReportStats();
+
+  return (
+    <Stack gap={6}>
+      {/* Statistics and Validation */}
+      <Grid narrow>
+        <Column lg={8}>
+          <Tile>
+            <h4 style={{ marginTop: 0 }}>Report Statistics</h4>
+            <StructuredListBody>
+              <StructuredListRow>
+                <StructuredListCell>Parameters</StructuredListCell>
+                <StructuredListCell>{stats.parameters}</StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Total Indicators</StructuredListCell>
+                <StructuredListCell>{stats.totalIndicators}</StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Base Indicators</StructuredListCell>
+                <StructuredListCell>
+                  <Tag type="blue">{stats.baseIndicators}</Tag>
+                </StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Composite Indicators</StructuredListCell>
+                <StructuredListCell>
+                  <Tag type="green">{stats.compositeIndicators}</Tag>
+                </StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Temporal Indicators</StructuredListCell>
+                <StructuredListCell>
+                  <Tag type="purple">{stats.temporalIndicators}</Tag>
+                </StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Dimensions</StructuredListCell>
+                <StructuredListCell>{stats.dimensions}</StructuredListCell>
+              </StructuredListRow>
+              <StructuredListRow>
+                <StructuredListCell>Datasets</StructuredListCell>
+                <StructuredListCell>{stats.datasets}</StructuredListCell>
+              </StructuredListRow>
+            </StructuredListBody>
+          </Tile>
+        </Column>
+
+        <Column lg={8}>
+          <Tile style={{ background: isValid ? 'var(--cds-background-success)' : 'var(--cds-background-warning)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.5rem' }}>
+              {isValid ? (
+                <Checkmark size={20} style={{ color: 'var(--cds-support-success)' }} />
+              ) : (
+                <span style={{ fontSize: '1.5rem' }}>⚠️</span>
+              )}
+              <strong style={{ fontSize: '1rem' }}>
+                {isValid ? 'Valid Configuration' : 'Validation Issues'}
+              </strong>
+            </div>
+            <p style={{ margin: 0, fontSize: '0.9rem', opacity: 0.85 }}>
+              {isValid
+                ? 'This report configuration appears to be complete and well-formed.'
+                : `Found ${validationErrors.length} issue${validationErrors.length !== 1 ? 's' : ''} that should be reviewed.`}
+            </p>
+          </Tile>
+
+          {error && (
+            <InlineNotification
+              kind="error"
+              title="Error"
+              subtitle={error}
+              style={{ marginTop: '1rem' }}
+              onCloseButtonClick={() => setError(null)}
+            />
+          )}
+
+          {!isValid && validationErrors.length > 0 && (
+            <Tile style={{ marginTop: '1rem', background: 'var(--cds-field-01)', padding: '1rem' }}>
+              <h6 style={{ marginTop: 0, marginBottom: '0.5rem' }}>Validation Issues:</h6>
+              <ul style={{ margin: 0, paddingLeft: '1.5rem' }}>
+                {validationErrors.map((err, index) => (
+                  <li key={index} style={{ marginBottom: '0.25rem' }}>{err}</li>
+                ))}
+              </ul>
+            </Tile>
+          )}
+        </Column>
+      </Grid>
+
+      {/* Export Actions */}
+      <Tile>
+        <h4 style={{ marginTop: 0 }}>Export Configuration</h4>
+        <p style={{ opacity: 0.7, marginBottom: '1rem' }}>
+          Download or copy the complete JSON configuration for this report
+        </p>
+        <div style={{ display: 'flex', gap: '0.5rem' }}>
+          <Button
+            kind="secondary"
+            renderIcon={copied ? Checkmark : Copy}
+            onClick={handleCopyToClipboard}
+          >
+            {copied ? 'Copied!' : 'Copy to Clipboard'}
+          </Button>
+          <Button
+            kind="primary"
+            renderIcon={Download}
+            onClick={handleDownloadJson}
+          >
+            Download JSON
+          </Button>
+        </div>
+      </Tile>
+
+      {/* JSON Preview */}
+      <Tile>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+          <h4 style={{ margin: 0 }}>Complete JSON Configuration</h4>
+          <Tag type="gray">{JSON.stringify(report, null, 2).length} characters</Tag>
+        </div>
+
+        <div style={{ maxHeight: '600px', overflow: 'auto' }}>
+          <CodeSnippet type="multi">
+            {JSON.stringify(report, null, 2)}
+          </CodeSnippet>
+        </div>
+      </Tile>
+
+      {/* Usage Information */}
+      <Tile style={{ background: 'var(--cds-background-information)' }}>
+        <h5 style={{ marginTop: 0 }}>Using This Configuration</h5>
+        <p style={{ opacity: 0.85, margin: '0.5rem 0' }}>
+          This JSON configuration represents the complete definition of your legacy report. You can:
+        </p>
+        <ul style={{ marginTop: '0.5rem', marginBottom: 0, paddingLeft: '1.5rem', opacity: 0.85 }}>
+          <li><strong>Save it:</strong> Store this configuration in your configuration repository</li>
+          <li><strong>Version it:</strong> Track changes to report definitions over time</li>
+          <li><strong>Share it:</strong> Distribute report configurations across facilities</li>
+          <li><strong>Import it:</strong> Upload this JSON to create reports in other systems</li>
+          <li><strong>Test it:</strong> Use the configuration to validate report behavior</li>
+        </ul>
+      </Tile>
+    </Stack>
+  );
+};
+
+export default LegacyReportJsonPreviewTab;

package/src/components/legacy-reports/tabs/legacy-report-overview-tab.component.tsx

@@ -0,0 +1,218 @@
+import React from 'react';
+import {
+  TextInput,
+  TextArea,
+  Select,
+  SelectItem,
+  FormGroup,
+  Tile,
+  Stack,
+  Grid,
+  Column,
+} from '@carbon/react';
+import { Information } from '@carbon/icons-react';
+import type { LegacyReportConfig } from '../legacy-report-editor-page.component';
+
+type Props = {
+  report: LegacyReportConfig;
+  onChange: (report: LegacyReportConfig) => void;
+};
+
+const categories = [
+  { value: 'NATIONAL_REPORTS', label: 'National Reports' },
+  { value: 'FACILITY_REPORTS', label: 'Facility Reports' },
+  { value: 'COMMUNITY_REPORTS', label: 'Community Reports' },
+  { value: 'LAB_REPORTS', label: 'Laboratory Reports' },
+  { value: 'PHARMACY_REPORTS', label: 'Pharmacy Reports' },
+];
+
+const reportTypes = [
+  { value: 'AGGREGATE', label: 'Aggregate Report' },
+  { value: 'LINELIST', label: 'Patient Line List' },
+  { value: 'COHORT', label: 'Cohort Analysis' },
+  { value: 'SUMMARY', label: 'Summary Report' },
+];
+
+const reportYears = [
+  { value: 'BEFORE_2019', label: 'Before 2019' },
+  { value: 'YEAR_2019', label: '2019' },
+  { value: 'YEAR_2020', label: '2020' },
+  { value: 'YEAR_2021', label: '2021' },
+  { value: 'YEAR_2022', label: '2022' },
+  { value: 'YEAR_2023', label: '2023' },
+  { value: 'YEAR_2024', label: '2024' },
+  { value: 'YEAR_2025', label: '2025' },
+];
+
+const reportScopes = [
+  { value: 'NATIONAL_AGGREGATION', label: 'National Aggregation' },
+  { value: 'FACILITY_BASED', label: 'Facility Based' },
+  { value: 'COMMUNITY_BASED', label: 'Community Based' },
+  { value: 'DISTRICT_LEVEL', label: 'District Level' },
+  { value: 'REGIONAL_LEVEL', label: 'Regional Level' },
+];
+
+const LegacyReportOverviewTab: React.FC<Props> = ({ report, onChange }) => {
+  const handleChange = (field: keyof LegacyReportConfig, value: any) => {
+    onChange({
+      ...report,
+      [field]: value,
+    });
+  };
+
+  return (
+    <Stack gap={6}>
+      {/* Basic Information */}
+      <Tile>
+        <h4 style={{ marginTop: 0 }}>Basic Information</h4>
+        <Grid narrow>
+          <Column lg={8} md={4} sm={4}>
+            <FormGroup legendText="">
+              <TextInput
+                id="report-name"
+                labelText="Report Name"
+                placeholder="Enter report name"
+                value={report.name}
+                onChange={(e) => handleChange('name', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              />
+            </FormGroup>
+          </Column>
+
+          <Column lg={8} md={4} sm={4}>
+            <FormGroup legendText="">
+              <TextInput
+                id="report-version"
+                labelText="Version"
+                placeholder="0.1.0-generic"
+                value={report.version || ''}
+                onChange={(e) => handleChange('version', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              />
+            </FormGroup>
+          </Column>
+        </Grid>
+
+        <FormGroup legendText="">
+          <TextArea
+            id="report-description"
+            labelText="Description"
+            placeholder="Enter report description"
+            value={report.description || ''}
+            onChange={(e) => handleChange('description', e.target.value)}
+            rows={4}
+          />
+        </FormGroup>
+      </Tile>
+
+      {/* Report Classification */}
+      <Tile>
+        <h4 style={{ marginTop: 0 }}>Report Classification</h4>
+        <Grid narrow>
+          <Column lg={4} md={4} sm={4}>
+            <FormGroup legendText="">
+              <Select
+                id="report-category"
+                labelText="Category"
+                value={report.category || ''}
+                onChange={(e) => handleChange('category', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              >
+                <SelectItem value="" text="Select category" />
+                {categories.map((cat) => (
+                  <SelectItem key={cat.value} value={cat.value} text={cat.label} />
+                ))}
+              </Select>
+            </FormGroup>
+          </Column>
+
+          <Column lg={4} md={4} sm={4}>
+            <FormGroup legendText="">
+              <TextInput
+                id="report-subcategory"
+                labelText="Subcategory"
+                placeholder="e.g., PATIENT_REGISTERS"
+                value={report.subcategory || ''}
+                onChange={(e) => handleChange('subcategory', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              />
+            </FormGroup>
+          </Column>
+
+          <Column lg={4} md={4} sm={4}>
+            <FormGroup legendText="">
+              <Select
+                id="report-type"
+                labelText="Report Type"
+                value={report.reportType || ''}
+                onChange={(e) => handleChange('reportType', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              >
+                <SelectItem value="" text="Select report type" />
+                {reportTypes.map((type) => (
+                  <SelectItem key={type.value} value={type.value} text={type.label} />
+                ))}
+              </Select>
+            </FormGroup>
+          </Column>
+
+          <Column lg={6} md={4} sm={4}>
+            <FormGroup legendText="">
+              <Select
+                id="report-year"
+                labelText="Report Year"
+                value={report.reportYear || ''}
+                onChange={(e) => handleChange('reportYear', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              >
+                <SelectItem value="" text="Select report year" />
+                {reportYears.map((year) => (
+                  <SelectItem key={year.value} value={year.value} text={year.label} />
+                ))}
+              </Select>
+            </FormGroup>
+          </Column>
+
+          <Column lg={6} md={4} sm={4}>
+            <FormGroup legendText="">
+              <Select
+                id="report-scope"
+                labelText="Report Scope"
+                value={report.reportScope || ''}
+                onChange={(e) => handleChange('reportScope', e.target.value)}
+                style={{ marginBottom: '1rem' }}
+              >
+                <SelectItem value="" text="Select report scope" />
+                {reportScopes.map((scope) => (
+                  <SelectItem key={scope.value} value={scope.value} text={scope.label} />
+                ))}
+              </Select>
+            </FormGroup>
+          </Column>
+        </Grid>
+      </Tile>
+
+      {/* Information Section */}
+      <Tile style={{ background: 'var(--cds-background-information)' }}>
+        <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'flex-start' }}>
+          <Information size={20} style={{ marginTop: '2px' }} />
+          <div>
+            <strong>About Report Classification</strong>
+            <p style={{ margin: '0.5rem 0', opacity: 0.85 }}>
+              These classifications help organize and categorize reports for better discoverability and consistency.
+              Choose categories and types that best represent your report's purpose and data structure.
+            </p>
+            <ul style={{ margin: 0, paddingLeft: '1.5rem', opacity: 0.85 }}>
+              <li><strong>Category:</strong> High-level grouping (National, Facility, Community, etc.)</li>
+              <li><strong>Report Type:</strong> Data structure type (Aggregate, Line List, Cohort, etc.)</li>
+              <li><strong>Report Scope:</strong> Geographic/organizational scope of the report</li>
+              <li><strong>Report Year:</strong> The reporting year or version year this report applies to</li>
+            </ul>
+          </div>
+        </div>
+      </Tile>
+    </Stack>
+  );
+};
+
+export default LegacyReportOverviewTab;